React で Google OAuth 認証を使用する

この記事では、Google OAuth を使用して、React プロジェクトで OAuth 2.0 準拠の認証コード付与を作成する方法を学習します。 これにより、認証ソリューションの作成と維持に関連するすべての課題が、ユーザーから離れて Google OAuth に抽象化されます。

React で Google OAuth 認証を使用する

まず、Google クライアント ID と クライアント シークレット を生成する必要があります。 まず、ブラウザで "Google OAuth" を検索し、検索結果の最初のリンクをクリックします。

このページには、アクセス キーを取得するための段階的な手順が含まれています。 ただし、クライアント ID とシークレットを適切に生成する方法について説明します。

Google API コンソール リンクをクリックして、OAuth 2.0 クライアント資格情報を受け取ります。

新しいプロジェクトを作成する

ここで、ドロップダウン メニューから [Google-Oauth] を選択すると、モーダルが開き、現在のプロジェクトを選択するか、新しいプロジェクトを作成できます。

まだ行っていない場合は、"New Project" ボタンをクリックし、プロジェクト名を入力して、"CREATE" ボタンをクリックします。

OAuth 同意画面を作成する

認証情報を生成する前に、同意画面を作成する必要があります。 ユーザーが [Google OAuth でサインイン] ボタンをクリックすると、同意画面が表示されます。

次に、左側のサイドバーのAPI とサービスの下にある [OAuth 同意画面] オプションをクリックします。 アプリケーションが一般向けの場合は、外部ユーザー タイプを選択し、OAuth 同意画面で作成ボタンをクリックします。

その後、アプリの同意ページに必要な情報を入力します。

フィールドへの入力が完了したら、保存して続行ボタンをクリックします。

スコープページでスコープの追加または削除をクリックします。 追加できるスコープの量は、開発しているアプリケーションの種類によって決まりますが、ユーザーの電子メール アドレスとプロファイル情報に関心があるだけです。

下にスクロールして、スコープを選択した後、"UPDATE"ボタンをクリックします。 次に、保存して続行ボタンを押します。

テスト ユーザーを追加するには、[テスト ユーザー] タブに移動し、[ユーザーを追加] ボタンをクリックします。 サンドボックス モードでは、テスト ユーザーのみがアプリケーションにログインできることに注意してください。

テスト ユーザーを追加したら、[保存して続行] をクリックします。

[概要] タブで情報を慎重に確認し、入力した情報が有効であると確信したら、[ダッシュボードに戻る] ボタンをクリックします。

Oauth クレデンシャル

"APIs & Services" の下のサイドバーから Credentials を選択します。 [資格情報] タブで、OAuth クライアント ID を選択し、[資格情報を作成] をクリックします。

次に、ユーザーのデータにアクセスするために必要な詳細を指定します。 承認されたリダイレクト URI は、サーバー ルートを参照する必要があります。 これにより、同意画面から GET リクエストをサーバーに送信できるようになります。

他のアプローチを取ることもできますが、この方法の方が速いと思います。

必要なデータを提供した後、作成ボタンをクリックすると、生成されたクライアント ID とクライアント シークレットを取得する必要があります。

クライアント ID とクライアント シークレットはノートブックに保存できます。これは、react アプリケーションに実装するためです。 上記のスクリーンショットとは異なるクライアント ID とクライアント シークレットを使用していることに注意してください。

ここで、Google Oauth2 認証を使用してログインおよびログアウト機能を作成する React アプリに飛び込みましょう。

まず、ログイン機能で役立つログイン コードを生成します。

コード例 - login.js:

import {GoogleLogin} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Login() {
  const onSuccess = (res) => {
    console.log('Login Success! current user: ', res.profileObj);
  };

  const onFailure = (res) => {
    console.log('Login Failed: res: ', res);
  };

  return (
    <div id='signInButton'>
      <GoogleLogin
  clientId = {clientId} buttonText = 'Login'
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiesPolicy={'single_host_origin'}
        isSignedIn={
    true}
      />
    </div>
  );
}

export default Login;

生成したクライアント ID は、Google クライアント ID という変数を作成することで使用できます。 react-google-login からインポートした次のコードで、ログイン ボタンを作成しました。

また、コンソールでさまざまな情報を提供する方法も開発しました。 ログインが成功した場合は、Login Success! のようなメッセージを送信します。

コード例 - logout.js:

import {GoogleLogout} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Logout() {
  const onSuccess = () => {
    console.log('Log out successfully!');
  };

  return (
    <div id='signOutButton'>
      <GoogleLogout
        clientId={clientId}
        buttonText={'Logout'}
        onLogoutSuccess={
    onSuccess}
      />
    </div>
  );
}

export default Logout;

これは同様のログイン ページと同じです。 react-google-login から Google ログアウトをインポートし、Google クライアント ID の変数を作成しました。

コード例 - App.js:

import {gapi} from 'gapi-script';
import {useEffect} from 'react';

import LoginButton from './components/login';
import LogoutButton from './components/logout';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function App() {
  useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: clientId,
        scope: '',
      });
    }
    gapi.load('client:auth2', start);
  });

  return (
    <div className='App'>
      <LoginButton />
      <LogoutButton />
    </div>
  );
}

export default App;

App.js では、login.js と logout.js の 2つのページをレンダリングしました。 上記のコードは、gapi キーワードが使用されていることを示しています。

gapi は JavaScript 用の Google API クライアント ライブラリで、反応ページで oauth2 をロードするのに役立ちます。

gapi.load('client:auth2', start);

通常、ページがロードされたときに呼び出されます。 ":" 文字は、複数のライブラリをロードするために使用されます。

ここでは、クライアント ライブラリと auth2 ライブラリの両方をロードするために使用されます。 コードを実行すると、次のようなものが表示されます。

ボタンは 2つあります。 ログインとログアウト. ログインをクリックすると、Google ログイン ID を選択できるようになり、コンソールにいくつかの情報が表示されます。

同様に、[ログアウト] をクリックすると、ログアウトされ、コンソールにいくつかの情報が表示されます。

このようにして、Google Oauth2 認証を使用して、react の Google ログイン/ログアウト ボタンでユーザーを認証できます。