Ruby on Rails でワンタップ Google サインインを実装する方法 by@shlokashah
720 測定値

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

2022/09/25
6
@shlokashah 720 測定値
tldt arrow
JA
Read on Terminal Reader

長すぎる; 読むには

Google Identity Services には、カスタマイズされたサインイン/サインアップ ボタンが用意されています。 Ruby on Ruby on Rails をサーバーとして使用するフロントエンド アプリケーションで Google サインインまたは One Tap を使用する方法について説明します。 OAuth クライアント ID を使用するには、Google Developer Console でアプリケーションを作成する必要があります。また、One Tap Sign In ボタンを設定して、アプリケーションで Google がグローバルに定義されていることを示す必要があります。 One Tap Button を使用して、カスタマイズされたサインイン ボタンを表示することもできます。

Company Mentioned

Mention Thumbnail
featured image - Ruby on Rails でワンタップ Google サインインを実装する方法
Shloka Shah HackerNoon profile picture

@shlokashah

Shloka Shah

Sharing My Learning & Experiences | SDE II @ HackerRank...

約 @shlokashah
LEARN MORE ABOUT @SHLOKASHAH'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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

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

    image

ワンタップサインイン

image

飛び込みましょう!!

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

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

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

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

    image

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


    image

  • 完了すると、 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> );

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

image

ステップ 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

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

image

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

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

こちらにも掲載

関連ストーリー

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa