翻訳記事です理解を助けるような画像や説明を、追加しています。3factorアプリを非常に素早く構築できます。schema(承認)に対して細かいアクセスコントロールルールの定義を手助けします。認証システムを、Hasuraバックエンドといくつかのフロントエンドと統合するには、まだ必要な試みがあり、ややこしいかもしれません。appのようなリアルタイム投票アプリを作ることによって、実際に動くことを目指します。Authentication、フロントエンドにReactを利用します。3つのステップがあります。Hasuraのセットアップと、Hasuraコンソールを利用してデータモデルを作成します。認証をセットアップします。Webアプリを構築します。あり、それを試すことができます。それは、あなたのお気に入りのプログラミング言語に投票することができる、シンプルなアプリです。投票はリアルタイムに更新されます。サインインした後、言語に”好き”とマークすることができます。自分で認証システムを構築する堅牢な認証システムを構築することは、簡単ではありません。それを頑張るよりも、アプリの開発サイクルを回すことがとても重要です。Authenticationを利用します。Firebaseは、セキュアで、サードパーティやパスワードレスのサインインといった多くの機能があり、無料の利用枠があります。HasuraHasuraを動かすのはとっても簡単です。Guideに従って、最後までやると、https://[your-heroku-project-name].herokuapp.comのようなドメインで新しいインスタンスが動きます。consoleにいくつかの環境変数を設定する必要があります。忘れないうちに、HASURA_GRAPHQL_ADMIN_SECRETへ秘密の文字を設定し、メモを残しておきましょう、そうすることで、インターネット上の誰かがAPIにアクセスすることを防げます。"https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com"}を設定します。最後に、HASURA_GRAPHQL_UNAUTHORIZED_ROLEにanonymousを設定します。認証されていないユーザに、データの書き込みと読み込みを許可するためです。今から、データモデリングをしていきます。vote_countフィールドを持つ、programming_languageテーブルが必要になります。画面上部の「DATA」をクリックして、テーブル一覧画面に移動します。Table」をクリックして、テーブルを作成画面に移動します。(補足)テーブル名、カラムを入力します。nameを入力します。「Create」をクリックして作成します。同様に、ユーザーにある言語が好かれているかどうかを記録するためのloved_languageテーブルが必要です。ユーザは、一度だけ言語を”好き”とマークすることができ、プライマリーキーとしてnameとuser_idを組み合わせて設定します。Keysを設定する方法はありませんが、Hasuraには、生のSQLを実行するための、便利な方法を提供します。Keyを設定できます。)「SQL」をクリックして、SQL実行画面に移動します。(補足)SQLを張り付けて「RUN」をクリックします。(補足)2つのテーブルを作成した後、Hasuraは、loved_languageとprogramming_languageの間の1対多の関係を認識し、対応するGraphQLのリレーションシップを作成することを手助けします。relationshipsに作成するリレーションの名前は、lovedLanguagesBynameにしてください。(補足)あとで、Reactのソースコードに記述するGraphQLのクエリで指定するためです。(補足)万歳!すでにデータモデルはできているので、GraphQLのAPIを試すことができます。programming_languageにあなたの好きな言語をいくつか登録してください。登録した言語に投票してください。ランダムなuser_idでlove_languageに登録してください。Adminとしてサインインしているので、必要なことは何でもできます。anonymousとuserロールに適切な権限を設定する必要があります。programming_languageのuserロールとanonymousロールにはselectとupdateの両方を許可します。programming_languageをクリックした後、Permissionをクリックします。(補足)Roleにanonymousを入力して、selectをクリックします。Permissions」をクリックしますselectの時と同様にupdateも設定します。permissonsのvote_countにを選択しますRoleにuserを追加して、同様にselectとupdateを設定します。設定が終わると下記画像のようになるはずです。loved_languageテーブルへのinsert、select、deleteは、userロールのみ許可します。insertするときのuser_idは、X-Hasura-User-Idから取得する必要がありますloved_languageをクリックします。(補足)すでにanonymousとuserロールはできているので、userのinsertをクリックします。checkを選択します。順で選択し、X-Hasura-User-Idを入力します。permissionsのnameにチェックを入れます。variableを選択し、User-Idを入力します。Permissions」をクリックします。Select:(補足)userのselectをクリックします。checkを選択します。順で選択し、X-Hasura-User-Idを入力します。permissionsのnameとuser_idを選択します。queriesを選択します。Delete:(補足)userのdeleteをクリックします。checkを選択します。順で選択し、X-Hasura-User-Idを入力します。設定が終わると、下記画像のようになるはずです。権限を設定したので、X-Hasura-User-Idを安全に取得することが必要になります。websiteに行って、新しいプロジェクトを作成してください。デフォルトで無料プランなので、課金される心配はありません。サインイン機能をONにします。sign-inを利用しますが、他のプロバイダを追加するのは簡単です。domainsに注目してください、localhostとFirebaseのドメインが自動で追加されています。domains」に追加する必要があります。SDKを利用して、Reactアプリのユーザとしてサインインしたあと、Hasuraからidトークンを取得することができます。claimsを追加する必要があります。Functionsを利用します。Functionは、「Firebaseの機能とHTTPSリクエストによってトリガーされたイベントに応答して」自動的に実行される機能です。今回のイベントは、firebaseのユーザ作成です。それが起きたとき、ユーザのid-tokenにデータを追加します。このコードは明快です。});コメントのついているコードには、もう少し説明が必要です。appにユーザがサインインした時、Firebaseは、Hasuraに送信する必要のあるid-tokenを含めて。ユーザのデータをすぐに提供します。claimsは含まれない可能性があります。databaseを利用する理由です。Functionをデプロイするのは簡単です。functionsを実行してください。consoleを閉じる前に、もう1つ設定を変更する必要があります。リアルタイムデータベースルールセクションに移動して、readをfalseからtrueに変更します。しなければ、クライアントはトークの更新を監視できません。React最後に、わくわくするUIを構築します。Clientを利用します。guideに従って、必要なnpmパッケージをすべて追加してください。アプリはシンプルなので、AuthとAppの2つのコンポーネントのみ構築します。SDKを利用して、Appに状態を渡します。Appにはすべてのビジネスロジックが含まれており、リアルタイムデータの購読、投票そして、"好き"と言語にマークします。APIに慣れているなら、このコードは明快です。Functionで設定した更新時間を監視するFirebaseリアルタイムデータベースをどのように利用するか注目してください。claimsにユーザid-tokenが含まれているか確認します。);}HasuraとGraphQLを利用して、色々な認証状態に基づいて、データを柔軟に問い合わせできるようになったことに注目してください。まとめこのチュートリアルでは、Hasuraを使ってリアルタイム投票アプリを構築しました。バックエンドとフロントエンドを堅牢な認証システムで統合します。Hasuraが、退屈で難しい仕事を、GraphQLと認証インタフェースの連携によって、いかに簡単に作れるかを見ることができます。このモデルに基づいて、大体の素晴らしいアプリを制限なく構築することができます。Zhanは、中国に住むフルスタックWeb開発者です。Flutter、React、そしてHasuraを使った、クロスプラットフォームの構築が得意です。彼は、趣味で、たくさん歩くことや水泳をすることが大好きです。パフォーマンスチェックリストを翻訳しましたブログ・お知らせINDEXSHARESHARERECRUIT一緒にチャレンジしませんか?CONTACTお気軽にお問い合わせください。application.。