認証は、最新のアプリケーションでは一般的な方法です。このブログ記事では、 をサーバーとして使用するフロントエンド アプリケーションに Google Identity Services を統合する方法について説明します。 Google ID サービスが提供するもの Google サインインによる Ruby on Rails カスタマイズされたサインイン/サインアップ ボタン ワンタップサインイン 飛び込みましょう!! ステップ 1: Google Developer Console でアプリケーションを作成します。 Google サインインまたはワンタップを使用するには、 と に追加する が必要です。 クライアント サーバー client_id アプリケーションを作成するには、 Google デベロッパー コンソール [ を選択します。これを行う前に、設定する必要があります . 資格情報の作成] > [OAuth クライアント ID] 同意画面 client_id を作成するときは、必ず とクライアントが実行されているポートを、開発用の承認済み Javascript オリジンと本番 URL に含めてください。 localhost 完了すると、 の形式の が作成されます。 1234567890-abcdefg.apps.googleusercontent.com client_id アプリケーションのセットアップの詳細については、次を参照してください。 。 ここに ステップ 2: クライアントでライブラリを設定する クライアント ライブラリをロードするには、 または を使用している場合は、 に を追加します。 を使用する場合は React.js _app.jsx index.html <script src="https://accounts.google.com/gsi/client" async defer></script> _app.jsx jsx。 ステップ 3: カスタマイズされたサインイン ボタンを表示する useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []); は、google が でグローバルに定義されていることを示すために追加されます。 global google index.html メソッドは、指定されたフィールドに基づいて Sign In With Google クライアント インスタンスを作成します。 は、Google アプリケーションの作成時に取得する必須フィールドです。 は、One Tap プロンプトまたはポップアップ ウィンドウから返された ID トークンを処理する JavaScript 関数 (ここでは ) です。 google.accounts.id.initialize client_id callback signInCallback デフォルトでは、ユーザーが画面上の任意の場所をクリックすると、ワンタップ プロンプトに指数関数的なクールダウンが適用されます。プロンプトを常に表示する場合は、この値を に設定します。より多くの構成を見ることができます false ここ。 メソッドは、[Google でサインイン] ボタンをレンダリングします。構成をいじることができます google.accounts.id.renderButton ここ。 は HTML 要素です。以下のコードを Web ページの HTML に追加すると、 document.getElementById("signInDiv") return ( <div className="App"> <div id="signInDiv" /> </div> ); このようなカスタマイズされたボタンが表示されます ステップ 4: ワンタッププロンプトを表示する プロンプトを表示するには、これを useEffect に追加します。 google.accounts.id.prompt(); ステップ 5: コールバック関数の定義 で述べたように、signInCallback は次のように定義できるコールバック関数です。 ステップ 3 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } }; どこ、 次のステップで作成するサーバー URL です。 ローカルホスト:3000/ユーザー/グーグル [サインイン] または [ワンタップ] ボタンをクリックすると、 は Google からの応答になります。 結果 は 2 つのフィールドで構成されます 結果 : このフィールドは、base64 でエンコードされた JSON Web トークン (JWT) 文字列としての ID トークンです。 credential : 資格証明の選択方法を示します。詳しくは . select_by ここ 結果から資格情報を取得し、それをパラメーターとしてサーバーに渡します。 ステップ 6: コントローラーとルートをサーバーに追加する クライアントからのリクエストを処理するために、サーバーにルートを作成します。その前に、クライアントから JWT を受け入れるコントローラーを作成する必要があります。 ファイル を作成し、メソッド を追加します。 app/controllers/users/user_controller.rb google にルート を追加します。 config/routes.rb users/user#google_oauth ルートが JWT を受け取ると、最初の最も重要なステップは、JWT が検証されているかどうかを確認することです。この目的のために、gem を使用できます。 これは、発行された ID トークンを検証するための Google の公式 gem です。 google_auth これは、を使用して簡単に行うことができます Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" ここで、 はクライアントから受信した JWT であり、 は Google アプリケーションのクライアント ID です。 access_token aud トークンが有効な場合、このようなハッシュを返すか、例外をスローします { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "your-email@gmail.com", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" } トークンが有効な場合は、ユーザーが存在するかどうかをデータベースで確認し、それに応じてユーザーを作成できます。それが完了したら、認証方法に基づいてユーザーをサインインまたはリダイレクトできます。 # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end : サーバーに がインストールされていることを確認し、この を追加してください。 PS rack-cors application.rb config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end このようなエラーに直面しないように : アプリケーションが Web 用の Google Sign-In JavaScript Platform Library を使用している場合、前者は非推奨になるため、必ず Google Identity Service に移行してください。 PPS リンク この記事が、One Tap Login をプロジェクトに統合するのに役立つことを願っています。より詳細な情報については、公式をチェックしてください。 . ドキュメント も掲載 こちらに
