ParseでWeb API認証をマスターする – Javascript SDKとGraphQLフレーバー

多くのアプリケーション、特にウェブサイトでは、コンテンツへのアクセスを制限する必要があり、そのユーザーに関連する情報のみを安全な方法で表示するユーザーアカウントを持つことは、それを達成するための最も一般的な方法です。

今日は、すでに存在する HTML ページにログイン機能を実装する方法を学びます。

JavascriptSDKとGraphQL through Javascriptです。

GraphQLはリリースされたばかりのピカピカの技術で、私のゴールは同じことをするために両方の方法を比較することです。
ネタバレ注意 きっとGraphQLの方が気に入ると思う…。

GraphQLは、ファイルを視覚的に表示するために必要なすべてのファイルをすでに持っていますが、機能が不足しています。

GraphQLについてもっと知りたい方は、こちらの記事をご覧ください：GraphQLとは

この記事はかなり広範囲に渡るので、章ごとに具体的に何を学ぶかを紹介しよう：

1. Back4appでウェブホスティングを設定する
2. GraphQLの使用を有効にする
3. 最初のウェブサイトをデプロイする
4. 最初のJavascriptファイルを作成する
5. Parse SDKを組み込む
6. コード内でSDKを設定し、インスタンス化する
7. グラフィカルにユーザーを追加する
8. Javascript SDKを使用してユーザーを登録します。
9. ウェブサイト（ハードコードされた値）でサインアップをテストする
10. フォームを読み取り、Javascriptコードに適用するコードを記述します。
11. ウェブサイトでのサインアップをテストする（動的な値）
12. Javascript SDKを使用してログインプロセスを作成します。
13. ウェブサイトでのログインテスト（動的な値）
14. Javascript SDKパートのまとめ
15. GraphQL入門
16. GraphQLを使用するために必要なもの
17. 必要なツールのインストール
18. フロントエンドのコードを生成する方法の簡単な説明
19. NodeJSコードでのNPMモジュールの使用
20. GraphQLにおけるクエリーと変異の紹介
21. クエリー
22. ミューテーション
23. 独自のGraphQL SingUpメソッドを作成する
24. 独自のGraphQL LogInメソッドを作成する
25. Browserifyを使用してNodeJSコードをフロントエンド互換コードに変換する
26. そのコードをHTMLファイルにインクルードする
27. Browserifyが生成したコードを呼び出すJavascript関数をコーディングする
28. GraphQLサインアップとログインをテストする
29. GraphQLパートの結論

1.最初のステップ

最初のステップはBack4appでアプリを作成することです。作成手順はこちらのドキュメントで確認できる。

このステップはどちらのテクノロジーでも共通なので、どちらを選んでも必ず行う必要がある。

アプリを作成したら、ウェブホスティング機能を設定する必要がある。そうだ。Back4appでは静的コンテンツを含むウェブサイトを無料でホスティングできる。すごいだろ？

アプリを作成したら、Server Settingsへ：

ウェブホスティングとライブクエリの下にある「設定」をクリックします：

Back4appホスティングを有効にして、アプリケーションに適したドメイン名を選択します。back4app.io内でそのドメインに直接アクセスすることもできますし、DNSでそのドメインを指すCNAMEレコードを作成することもできます：

これで、コードのデプロイを始める準備ができました。

2.GraphQLはどうですか？

もしGraphQLを使いたいのであれば、もう一つステップがある。Javascript SDKのみを使用するのであれば、Parseのバージョンは問いませんが、最新のものを使用するのはいかがでしょうか？

サーバー設定に進みます：

そしてManage Parse ServerのSettingsの下にあります：

3.5.0以上のバージョンを選んでください。Back4appでは3.6.0を使いました：

これでGraphQLが有効になっているはずです！
そうそう、GraphQLとSDKは同じアプリで使えます。選ぶ必要はありません。

GraphQLにしか興味がない場合は、このチュートリアルの第15章までスクロールしてください。

3.最初のウェブサイトをデプロイする

ウェブホスティング機能を設定したので、ウェブサイトをデプロイすることができます。
このステップも両方のテクノロジーで共通です。
まだ何の機能もありませんが、初めて動くのを見るのは気持ちのいいものです。

もう一度サーバー設定にアクセスする：

そして今度はCloud Codeの下にあるSettingsを選択します：

その中に2つのフォルダがあります：CloudとPublicです。

CloudはCloud Codeをデプロイするためのもので、Back4appサーバーから実行されるNodeJSコードで、アプリケーションのすべての重い処理を行い、携帯電話のバッテリーやデータプランを節約するなどの多くの利点をもたらします。

一般向けは、HTML、CSS、静的Javascriptファイルなどの静的コンテンツのデプロイ用だ。今、私たちが興味を持っているのはこれです。
このフォルダを選択し、上の+ADDボタンをクリックし、最初の章でウェブサイトからダウンロードしたテンプレートのHTMLファイルとCSSファイルを追加します。

これらのファイルを選択した後、Deployボタンを押すと、Publicフォルダにファイルが表示されるはずです：

そして、いよいよテストです。
ウェブホスティングで設定したURLにアクセスすると、ピカピカの新しいウェブサイトが完全に無料で運営されていることが確認できるはずです：

4.いくつかの知性をもたらす

派手な光沢のある新しいウェブサイトが稼働しており、それは私たちに何がかかった？無料でそれを打つ良い見て、インターネット！
そして、このウェブサイトは完全にセキュアで、HTTPSがすでに組み込まれていると言っただろうか？Back4appが無料で証明書を提供してくれるのに、私たちは証明書にお金を払わないでしょう？

さて、そろそろインテリジェンスに磨きをかけよう。さらに2分もあればできるようにしたらどうだろう？私はインテリジェントで速いのが好きだ。

お気に入りのIDEを立ち上げて、Javascriptを使ってみよう。Visual Studio Codeをお願いします。エスプレッソも一緒に。

これからはJavascript SDKだけに焦点を当て、後でGraphQLだけに焦点を当てることにする。

Parse.jsという新しいファイルを作れば、準備は完了だ。

5.Parseフレームワークの追加

(Javascript SDKのみ）

Parseはフレームワークのデプロイをとても簡単にしてくれます。まず、index.htmlファイルのHeadセクションに以下の行を追加して、Javascriptフレームワークをインスタンス化する必要があります：

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script> 以下のようになります。

これで、Javascriptコードから完全なParseフレームワーク（最小化されたもの）にアクセスできるようになり、そこからすべてを使用できるようになります。

6.Parseエンジンの起動

(Javascript SDKのみ）

これでParseフレームワークにアクセスできるようになりましたが、スロットルを踏む前にParseエンジンを起動する必要があります。

そのためには、アプリケーションのAppIdとJavascript Keyを設定し、Back4appで動作していることを示すサーバーURLを設定します。

そのためには、Server Settingsにアクセスします：

そして、”Settings “の中の “Core Settings “の下にあります：

に必要な情報が全てあります：

その情報をコピーして、Parse.jsファイルに以下のように貼り付けましょう：

Parse.initialize("YourAppIdHere", "YourJavascriptKeyHere")；
Parse.serverURL = 'YourParseAPIAddressHere'

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE")；
Parse.serverURL = 'https://parseapi.back4app.com/'；

これで、私たちのアプリケーションはParseにフルアクセスできるようになり、Parseは私たちの設定を知っているので、操作できるようになりました。
グリーンライトフルスロットル！

7.でもユーザー数が少ないのですが…。

アプリケーションにユーザー登録が必要なく、手動で管理したい場合は、ParseダッシュボードのデータベースブラウザでUserクラスを取得し、Add a Rowボタンを押します：

しかし、現実的には、あなたのアプリケーションは時間とともに成長するでしょうし、ユーザーが自分でシステムに登録できるようにすることは助けになるでしょう。

8.ユーザーがいない？問題ありません！signUp()で解決です！

(Javascript SDKのみ)

最初は、アプリケーションにユーザーがいないでしょうから、ユーザーが登録する方法を提供しなければなりません。

私たちのウェブサイトには、そのための美しいフォームがすでにあります。それを機能させましょう。
12行以下のコードでできると言ったらどうでしょう？どうです？

Parse.Userクラスには、設定できる3つの基本プロパティがあります。必要であればもっと設定することもできますが、この3つは便宜上すでに作成されており、3つのうち2つは必須です：

• ユーザー名（必須）
• パスワード（必須）
• Eメール（オプション）

動作確認のために、データベースにテストユーザーを追加してみましょう。これをParse.jsファイルに追加してください：

function singnUp(){
    var user = new Parse.User()；
    user.set("username", "alex"); // Username フォームの値を username プロパティに設定します。
    user.set("password", "abc123"); // Passwordフォームの値をプロパティpasswordに設定する
    user.set("email", "[email protected]"); // Emailフォームの値をemailプロパティに設定する
    try { { user.signUp()
        user.signUp(); // すべてが成功し、ユーザはサインインした。
    } catch (error) {
        alert("Error: " + error.code + " + error.message); // おっと...何か問題が発生しました。
    }
}

これは、ハードコードされた値で新しいユーザーを作成します：

ユーザー名： alexk
パスワード: abc123
電子メール: [email protected]

フォームからこれらの値を取得する方法については、この記事でさらに学びますが、このテスト・ユーザーについては、これで十分です。

index.htmlファイルを開き、次の行を探してください：

<input type="submit" class="button" value="Sign Up">（入力タイプ="submit" クラス="ボタン" 値="サインアップ">）。

そして次のように変更してください：

<input type="submit" class="button" value="Sign Up" onclick="singnUp()">そして次のように変更する。

基本的に、ここで行ったことは、先ほどコード化した関数signUpを起動するonClickイベントを設定することです。

上記で学んだように、両方のファイル（新しいParse.jsファイルと変更したindex.htmlファイル）をCloud Code Publicフォルダにデプロイし、ブラウザでウェブサイトを再度開きます。

9.テスト…テスト…123…

テストの時間だ！コードを見てください！

実際のデータを渡すわけではなく、ハードコードされたテストだけなので、何も入力する必要はありません：

すべてがうまくいったら、Parse ダッシュボードに、そのユーザとそのユーザの新しいセッションが表示されるはずです：

10.万歳!もっとスマートにしてみましょう。

(Javascript SDK & GraphQL)

さて、ユーザーを登録できるようになったので、完全に動作するsignUp関数を作ってみましょう。
データベースに挿入するためにフォームの値を読み込む必要がありますが、そのためにjavascriptのメソッドを使用します：

document.getElementById("idOfTheInput").value

この記事を書いている間に、使用したテンプレートにはちょっとした問題があることがわかりました。正しい値を取得できるようにIDは一意でなければならないのですが、私たちのテンプレートは、おそらく作成者がコードをコピー・アンド・ペーストしたために、いくつか繰り返されています。

HTMLファイルを開き、sign-up-htmセクションで以下の行を見つけてください：

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="text" class="input">

これらの行のid属性は、コード上で数回繰り返されていることに注目してほしい。ユニークなものに変更しよう：

<input id="username" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" type="password" class="input" data-type="password">
<input id="email" type="text" class="input">

    var username = document.getElementById("username").value；
    var password = document.getElementById("password").value；
    var passwordverify = document.getElementById("passwordverify").value；
    var email = document.getElementById("email").value；

    if (password !== passwordverify){
        alert ('パスワードが一致しません')
        を返します；
    }

    user.set("username", "alexk"); // Usernameフォームの値をusernameプロパティに設定する。
    user.set("password", "abc123"); // Passwordフォームの値をプロパティpasswordに設定する
    user.set("email", "[email protected]"); // Emailフォームの値をemailプロパティに設定する

    user.set("username", alexl); // Usernameフォームの値をusernameプロパティに設定する。
    user.set("password", password); // Passwordフォームの値をproperty passwordに設定する
    user.set("email", email); // Emailフォームの値をemailプロパティに設定する

11.再びテストタイム。今度は本番です。

12.ログインタイムです！

(Javascript SDKのみ)

function logIn(){
    var user = document.getElementById("user").value；
    var pass = document.getElementById("pass").value；
}

Parse.User.logIn(ユーザー, パス).then(() => {」とします。
    // 万歳！ユーザがログインしました
    alert('Hooray! User logged in!）
});

Parse.User.logIn(ユーザー, パス).then(() => {」となります。
    // 万歳！ユーザがログインしました
    alert('Hooray! User logged in!')；
}).catch(function(error){
    // おっと...何かおかしい
    alert("Error: " + error.code + " + error.message)；
});

13.そして今….

14.Javascript SDK部分のまとめ

15.GraphQLを導入しよう

Javascript SDKで興奮したなら、ポップコーンをどうぞ。

Back4appはGraphQLをサポートし、最新かつ最高のトレンドファッション技術に対応しています！

オートコンプリート（そうです！！）機能付きの完全に動作するGraphQL Playgroundで、私たちが行うクエリを生成することができます。

また、取得したいものを正確に指定できるため、ペイロードが小さくなり、エンドユーザーへのデータ配信が高速化し、APIの長期的なメンテナンスが非常に簡単になります。

わかった。話はもう十分だ。GraphQLはとても素晴らしいので、このままでは使い方を紹介せずに書き続けてしまうだろう。

16.必要なもの

(GraphQLのみ)

Parseのバージョンを少なくとも3.5.0（Back4appの3.6.0がGraphQLをサポートする最も早いバージョン）に変更していない場合は、この記事のセクション2まで進んで、変更してください。

NPMをインストールし、そのモジュールを使えるようにする必要がある。
これらのモジュールはNodeJSで書かれており、当初はバックエンドプログラミング用に設計されているので、それを変更する必要がある。
NPMのインストール方法については、上記のウェブサイトのチュートリアルがかなり広範囲にカバーしているので、ここでは紹介しない。
しかし、NPMの使い方を紹介することで、コーディングの手間を大幅に省くことができる。

準備はいいかい？では、ツールをインストールし、シートベルトを締めて、出発だ！

17.GraphQLクライアントとBrowserifyのインストール

(GraphQLのみ)

GraphQLにはいくつかのクライアントが用意されている。どれか1つを選ぶことはできないので（どれもかなり良いので）、この最初のチュートリアルでは最も設定が簡単なものを選び、次のチュートリアルでは他のものを使って比較できるようにすることにしました。

ターミナルを開き、Parse.jsが入っているフォルダに行き、次のように入力すればインストールできる：

npm install graphql-request

インストールに成功すると、このようになる：

Browserifyというツールもインストールできる。
Browserifyは、フロントエンド（ブラウザ）で使用するNPMモジュールの移行を行う。NPMモジュールは最初はバックエンド用に設計されていると言ったのを覚えていますか？このツールを使えば、最小限の労力でフロントエンドで利用できるようになる。
私は、どこからでも使えるようにグローバルにインストール（-gキー）するのが好きだ：

npm install -g browserify

すべてがうまくいけば、このようになるはずだ：

これでGraphQLクライアントがインストールされ、フロントエンドで使えるようになった。この作業に2分かかった。

18.これは具体的にどのように動作するのでしょうか？

(GraphQLのみ）

基本的には

1. NPMモジュールを使ってNodeJSコードを書く。
2. Browserifyを使ってフロントエンドと互換性のあるコードに変換する。
3. そのコードをエクスポートして、他のファイルから呼び出せるようにする
4. Javascriptコードからそのコードを呼び出す

Browserifyのコマンドは

browserify inputFile.js -o outputFile.js

outputFile.jsにはフロントエンドと互換性のあるコードが含まれる。

19.いくつかのNodeJSコード

(GraphQLのみ)

まず、NPMモジュールをコードに追加することから始めます。

const { GraphQLClient } = require('graphql-request')= require('graphql-request')；

そして、関数の呼び出しに使用する名前（この場合はsignUp）でグローバルエクスポートを作成します：

グローバルエクスポートを作成します。

}

これで、singUp関数にコードを追加し始めることができます。
まずは、GraphQL Playgroundから取得できるエンドポイントURLを追加しましょう：

const endpoint = 'https://parseapi.back4app.com/graphql'；

そして認証が必要なので、認証ヘッダーと一緒にそのURLをパラメーターとして渡してGraphQLクライアントをインスタンス化します：X-Parse-Application-IDとX-Parse-Javascript-Keyです。これらには、ステップ6で取得方法を学んだAppIdとJavascript Keyが含まれます。

const { GraphQLClient } = require('graphql-request')= require('graphql-request')

global.singUp = function() {
    constendpoint='https://parseapi.back4app.com/graphql'；
    
    constgraphQLClient=newGraphQLClient(endpoint, {
        ヘッダ：{
            「X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH"、
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhpAGVuoq"
        },
    });
}

さて、いよいよGraphQLクエリーとミューテーションをいくつか書いてみよう。

20.クエリーと変異、一般的か特殊か

(GraphQLのみ）

この文書を書いている時点では、Back4appとParseはQueriesとMutationで動作する。新しいメソッドが開発される可能性もあるが、ここではこの2つについて説明しよう。

クエリーは、サーバーからデータを取得する場合に使用します。

ミューテーションは、サーバー上のデータを変更するときに使います。

つまり、情報を消費するだけであればQueryを使い、情報を追加したり変更したりするのであればMutationを使うことになります。

まずはシンプルなクエリーから始め、その後ミューテーションへと進化させていく。

その一方で、GraphQLにはSpecificメソッドとGenericメソッドがあり、それぞれに長所と短所があります。

ジェネリックメソッドでは、どのクラスでも操作することができます。例えばジェネリッククエリーを作る場合、欲しいクラスを指定してデータを取得することができます。これは素晴らしいことで、ほとんどのことに同じ構文が使えるし、突然変異を使えば、最初は存在しないクラスやオブジェクトを作ることができる。

欠点は、ジェネリック・メソッド用のスキーマがないため、オートコンプリートに頼ることができないことです。
ジェネリック・メソッドの例は、getとfindです。
Generic Mutationsはupdate、delete、createです。

一方、Specificメソッドにはスキーマがあるので、あらかじめ存在するクラスでしか使えません。 これが欠点だ。
しかし、Specificメソッドを使うことで、オートコンプリートが使えるようになったり、データを取得するためのリソースがより強力になったりします。
Specificなクエリは、getやfindで始まり、findPerson、getPersonといったように、クラス名がすぐ隣に表示されます。
また、create、update、deleteで始まる特定のミューテーションでは、createPerson、getPerson、deletePersonのようにクラス名が隣に表示されます：

21.クエリー

(GraphQLのみ)

GraphQLで遊ぶために簡単なQueryを作ってみましょう。
Parse Dashboard の API Console から GraphQL Console に進みます。
ユーザーを検索する特定のクエリーを使用して、次のクエリーを入力します。任意のタイミングで CTRL + スペースバー（Windows）または OPTION + スペースバー（Mac）を押すと、入力中にオートコンプリートが実行されます。

クエリは、選択した Parse のバージョンによって異なります：

Parse 3.7.2：

クエリー
    objects{
        find_User{
            結果
                ユーザー名
                メール
            }
        }
    }
}

Parse 3.8：

クエリー
  ユーザー
      結果
          ユーザー名
          電子メール
      }
  }
}

Parse 3.9：

クエリー
  ユーザー
      結果
          ユーザー名
          電子メール
      }
  }
}

再生ボタンをクリックします：

Javascript SDK で作成した Users が表示されるはずです。この部分をスキップした場合は、第 7 章で説明したようにいくつかのユーザを追加して、再度クエリを実行してみてください。このような結果が表示されるはずです：

find_Userクエリを使用してすべてのユーザを検索し、ユーザ名とメールアドレスを取得しました。取得したいものを正確に指定することで、より小さなペイロードを生成し、オートコンプリートを頼りに開発することで、処理中にどの操作が利用可能かを知ることができます。

すごいだろ？

もっと良くしよう！

22.突然変異

(GraphQLのみ)

JavascriptのsignUpメソッドと同じように動作するように、signUpメソッドを持つGraphQLミューテーションを作成しましょう。

ミューテーションはこのようになります：

Parse 3.7.2

mutation{
  users{
    signUp(fields：{
      ユーザー名: "john"
      パスワード: "123456"
      電子メール"[email protected]"
    }){
      オブジェクトID
    }
  }
}

Parse 3.8

突然変異 SignUp{
  サインアップ(fields:{)
    ユーザー名: "somefolk"
    パスワード: "somepassword"
  }){
    オブジェクトID
    作成日時
  }
}

Parse 3.9

突然変異 SignUp{
  サインアップ(fields:{)
    ユーザー名: "somefolk"
    パスワード: "somepassword"
  }){
    id
    作成日時
    セッション・トークン
  }
}

実行し、データベースブラウザのUserクラスにユーザーが追加されたことを確認します。

やった！では、コード上で動作させてみましょう。

23.GraphQLを使った独自のサインアップメソッド

(GraphQLのみ)

javascriptのサインアップメソッドでは、GraphQL Playgroundで使用したものとほぼ同じMutationを使用しますが、そこではハードコードされた値を使用したのに対し、ここではユーザーがフォームに入力した値を想定して変数を設定する必要があります。

使用しているGraphQLクライアントで変数を使用するには、まずメソッドで変数名と型を指定する必要があります。signUpメソッドには3つの変数を渡します：ユーザー名、パスワード、電子メール、これらはすべて文字列なので、メソッドsingUpは次のようになります：

コンストラストsignUpMutation = /* GraphQL */
`
mutation signUp($username: String! $password: String! $email: String!){。
    
}
`

次に、これらの変数をcreate_Userメソッドの中で次のように使います：

Parse 3.7.2

        
        users{
            signUp(fields：{
              ユーザー名: $username
              パスワード: $password
              メールアドレスメールアドレス
            }){
              オブジェクトID
            }
        }

Parse 3.8

        
        users{
            signUp(fields：{
              ユーザー名: $username
              パスワード: $password
              メールアドレスメールアドレス
            }){
              オブジェクトID
            }
        }

Parse 3.9

        
        users{
            signUp(フィールド：{
              ユーザー名: $username
              パスワード: $password
              メールアドレスメールアドレス
            }){
              id
            }
        }

そして最後に、Mutationと一緒にパラメータとして渡される別のJSONオブジェクトに値を設定します：

変数 = {
        username: formUsername、
        password: formPassword、
        メール: formEmail
    }

formUsername、formPassword、formEmailの3つの値をフォームから取得してsingUp関数に渡すので、関数のパラメータに指定しなければなりません：

global.singUp = function(formUsername, formPassword, formEmail)

準備ができました！

これがメソッド全体です：

const { GraphQLClient } = require('graphql-request')= require('graphql-request')

global.signUp = function(formUsername, formPassword, formEmail) { { { { { { { formUsername, formPassword, formEmail) 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        ヘッダ：{
            "X-Parse-Application-Id"："5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH"、
            "X-Parse-Master-Key"："pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const signUpMutation = /* GraphQL */
    `
    ミューテーション signUp($username: String! $password: String! $email: String!){
        users{
            signUp(fields：{
                ユーザー名: $username
                パスワード: $password
                メールアドレスメールアドレス
            }){
                オブジェクトID
            }
        }
    }
    `

    const変数 = {
        username: formUsername、
        password: formPassword、
        電子メール: formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {)
        alert('Hooray! User created!')
    }).catch(error => { エラー: ' + formEmail
        alert('Error: ' + error.code + ' + error.message)
    })
    
}

24.せっかくなので…ログイン…

(GraphQLのみ)

singUp変異のすべてのステップをすでに説明したので、logInメソッドのコードだけ残しておきます。これはまったく同じ原則に従いますが、特定の変異logInを使用します：

mutation logIn($username: String! $password: String!){
  users{
    logIn(username: $ユーザー名 password: $パスワード){。
    	sessionToken  
    }
  }
}

そして、完全なコードは次のようになる：

global.logIn = function(formUsername、formPassword){。
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        ヘッダ：{
            "X-Parse-Application-Id"："5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH"、
            "X-Parse-Master-Key"："pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const logInMutation = /* GraphQL */。
    `
    ミューテーション logIn($username: String! $password: String!){
        users{
            logIn(ユーザー名: $ユーザー名 パスワード: $パスワード){ { { logIn(username: $ユーザー名 パスワード: $パスワード)
                セッション・トークン  
            }
        }
    }
    `

    const 変数LogIn = {
        ユーザ名: formUsername、
        パスワード: formPassword
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => { {'万歳！ユーザがログインしました。
        alert('Hooray! User logged in!')
    }).catch(error => { エラー
        alert('エラー :' + error.code + ' ' + error.message)
    })
}

25. Browserifying（なんだって？）

(GraphQLのみ)

第18章で、Broserify（NPMモジュールをフロントエンドと互換性のあるものにする）コマンドを紹介したのを覚えているだろうか？
もし覚えていなければ、もう一度ここに書いておこう：

browserify inputFile.js -o outputFile.js

これをinputFile.jsで実行し、graphql.jsというファイルに出力してみよう：

browserify inputFile.js -o graphql.js

すべてが成功すれば、何も出力されないはずだ：

簡単だろう？

26.ピカピカの新しいコードをHTMLに含める

(GraphQLのみ)

HTMLファイルのheadタグの中に、生成されたgraphql.jsファイルをインクルードする。
さらに、Parse.jsという空白のファイルを新規作成し、それもインクルードする。このファイルを使ってGraphQLメソッドを呼び出します：

<script src="./graphql.js"></script>
<scriptsrc="./Parse.js"></script>とします。

注意：チュートリアルのJavascriptの部分を読み飛ばしてしまった場合に備えて、第10章に戻り、そこで説明されているようにHTMLタグのIDを変更してください。フォームから値を取得するためには、この部分の作業が必要です。

27.アクションを見せてください！

(GraphQLのみ)

ここまでずいぶん進んだでしょう？コードを追加してアクションを表示させましょう！

Javascriptのセクションをスキップした場合は、第10章に戻り、Javascriptを使ってgetElementByIdメソッドを使ってフォームから値を読み取る方法を見てください：

document.getElementById("idOfTheInput").value

それでは、Parse.jsファイルを開き、logInとsingUpの2つのメソッドを追加しましょう：

関数 parseSignUp(){

}

関数 parseLogIn(){

}

さらに、フォームから値を読み取るコードと、第10章で説明したパスワードの等式検証コードを追加しましょう：

関数 parseSingnUp(){
    var username = document.getElementById("username").value；
    var password = document.getElementById("password").value；
    var passwordverify = document.getElementById("passwordverify").value；
    var email = document.getElementById("email").value；

    if (password !== passwordverify){
        alert ('パスワードが一致しません')
        を返します；
    }

}

関数 parseLogIn(){
    var user = document.getElementById("user").value；
    var pass = document.getElementById("pass").value；

}

しかし今回は、Javascript SDKを使う代わりに、graphql.jsファイルからsignUpメソッドとlogInメソッドを呼び出すことにしよう。完全なコードは次のようになる：

関数 parseSingnUp(){
    var username = document.getElementById("username").value；
    var password = document.getElementById("password").value；
    var passwordverify = document.getElementById("passwordverify").value；
    var email = document.getElementById("email").value；

    if (password !== passwordverify){
        alert ('パスワードが一致しません')
        を返します；
    }

    signUp(username, password, email)
}

関数 parseLogIn(){
    var user = document.getElementById("user").value；
    var pass = document.getElementById("pass").value；

    logIn(user, pass)
}

そして、HTMLファイルのonClickイベントでこれらを呼び出すことを忘れないでください：

第3章で説明したようにすべてをデプロイして、いくつかの準備が整いました。

28.テスト

(GraphQLのみ)

ウェブサイトにアクセスし、サインアップセクションに移動します。フォームに必要事項を入力し、サインアップボタンを押してください：

すべてがうまくいっていれば、Usersテーブルに新しいユーザーが表示されているはずです：

Sign Inセクションに戻り、そのユーザーでログインを試みます：

期待通りに動作していれば、ログインできているはずです：

29.GraphQLパートの結論

ふぅ！しかし、これであなたはサインアップとログインの達人です！おめでとうございます！

GraphQLは、最初の接触では、使用するためにいくつかのより多くのプロセスがあり、少し面倒に見えるかもしれませんが、私を信じてください！

私たちは今、オートコンプリートの助けを借りて作成した、より有機的でメンテナンスしやすいコードを手に入れ、コーディングを始める前からGraphQL Playgroundでレスポンスをテストし、検証することができました。これは、コードを作成する前にすべてのクエリを書いてテストできるだけでなく、チーム内で開発を分担することができるため、非常に大きなことです。

さらに良いことに、今後コードを変更する必要がある場合は、クエリを変更するだけで良いのです。

これ以上良くなるでしょうか？もちろん、可能です！

まったく同じ構文を使えば、どのプラットフォームでもGraphQLクエリを再利用できる。どの言語にも似ているのだ。もう「馴染みのないこの言語ではどうすればいいのだろう」と自問する必要はない。同じクエリ、異なる言語。

あなたの開発プロセスでGraphQLを試してみてほしい。どれだけ多くのことに到達できるか、きっと驚かれることだろう！