Ruby on Rails でワンタップ Google サインインを実装する方法

Google サインインによる認証は、最新のアプリケーションでは一般的な方法です。このブログ記事では、 Ruby on Railsをサーバーとして使用するフロントエンド アプリケーションに Google Identity Services を統合する方法について説明します。 Google ID サービスが提供するもの

1. カスタマイズされたサインイン/サインアップ ボタン

   

ワンタップサインイン

飛び込みましょう!!

ステップ 1: Google Developer Console でアプリケーションを作成します。

Google サインインまたはワンタップを使用するには、クライアントとサーバーに追加するclient_idが必要です。

• アプリケーションを作成するには、 Google デベロッパー コンソール

• [資格情報の作成] > [OAuth クライアント ID]を選択します。これを行う前に、設定する必要があります同意画面.

• client_id を作成するときは、必ずlocalhostとクライアントが実行されているポートを、開発用の承認済み Javascript オリジンと本番 URL に含めてください。

  
  

• 完了すると、 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", }); }, []);

• global googleは、google がindex.htmlでグローバルに定義されていることを示すために追加されます。

  
  

• google.accounts.id.initializeメソッドは、指定されたフィールドに基づいて Sign In With Google クライアント インスタンスを作成します。 client_idは、Google アプリケーションの作成時に取得する必須フィールドです。 callbackは、One Tap プロンプトまたはポップアップ ウィンドウから返された ID トークンを処理する JavaScript 関数 (ここではsignInCallback ) です。

  
  

• デフォルトでは、ユーザーが画面上の任意の場所をクリックすると、ワンタップ プロンプトに指数関数的なクールダウンが適用されます。プロンプトを常に表示する場合は、この値をfalseに設定します。より多くの構成を見ることができますここ。

  
  

• google.accounts.id.renderButtonメソッドは、[Google でサインイン] ボタンをレンダリングします。構成をいじることができますここ。

  
  

• document.getElementById("signInDiv")は HTML 要素です。以下のコードを Web ページの HTML に追加すると、

 return ( <div className="App"> <div id="signInDiv" /> </div> );

このようなカスタマイズされたボタンが表示されます

ステップ 4: ワンタッププロンプトを表示する

• プロンプトを表示するには、これを useEffect google.accounts.id.prompt();に追加します。

ステップ 5: コールバック関数の定義

• ステップ 3で述べたように、signInCallback は次のように定義できるコールバック関数です。

 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)); } };

どこ、

• ローカルホスト:3000/ユーザー/グーグル次のステップで作成するサーバー URL です。

  
  

• [サインイン] または [ワンタップ] ボタンをクリックすると、結果は Google からの応答になります。

  
  

• 結果は 2 つのフィールドで構成されます

  • credential : このフィールドは、base64 でエンコードされた JSON Web トークン (JWT) 文字列としての ID トークンです。

  • select_by : 資格証明の選択方法を示します。詳しくはここ.

    
    

• 結果から資格情報を取得し、それをパラメーターとしてサーバーに渡します。

ステップ 6: コントローラーとルートをサーバーに追加する

クライアントからのリクエストを処理するために、サーバーにルートを作成します。その前に、クライアントから JWT を受け入れるコントローラーを作成する必要があります。

• ファイルapp/controllers/users/user_controller.rbを作成し、メソッドgoogleを追加します。

  
  

• config/routes.rbにルートusers/user#google_oauthを追加します。

  
  

• ルートが JWT を受け取ると、最初の最も重要なステップは、JWT が検証されているかどうかを確認することです。この目的のために、gem を使用できます。 google_authこれは、発行された ID トークンを検証するための Google の公式 gem です。

  
  

• これは、を使用して簡単に行うことができます

Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"

ここで、 access_tokenはクライアントから受信した JWT であり、 audは Google アプリケーションのクライアント ID です。

• トークンが有効な場合、このようなハッシュを返すか、例外をスローします

{ "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "[email protected]", "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

このようなエラーに直面しないように

PPS : アプリケーションが Web 用の Google Sign-In JavaScript Platform Library を使用している場合、前者は非推奨になるため、必ず Google Identity Service に移行してください。リンク

この記事が、One Tap Login をプロジェクトに統合するのに役立つことを願っています。より詳細な情報については、公式をチェックしてください。ドキュメント.

こちらにも掲載