クイックスタート: メールアドレスとパスワードを使用したユーザーのログイン

このクイックスタートでは、Identity Platform を使用して、メールアドレスとパスワードでユーザーのログインを行う方法を説明します。

始める前に

  1. Google アカウントにログインします。

    Google アカウントをまだお持ちでない場合は、新しいアカウントを登録します。

  2. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

    [プロジェクトの選択] ページに移動

  3. Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトに対して課金が有効になっていることを確認する方法を学習する

ID プラットフォームを有効化

  1. Cloud Console で Identity Platform の Marketplace ページに移動します。

    Identity Platform の Marketplace ページに移動

  2. [Identity Platform を有効化] をクリックします。Cloud Console に Identity Platform のページが表示されます。

メールアドレスでのログインを構成する

  1. Cloud Console で [ID プロバイダ] ページに移動します。

    [ID プロバイダ] ページに移動

  2. [プロバイダを追加] をクリックします。

  3. プロバイダと企業の連携規格のリストから、[メール / パスワード] を選択します。

  4. [有効] スイッチを [オン] に切り替えます。

  5. [保存] をクリックします。

ユーザーを作成する

  1. Cloud Console の [ユーザー] ページに移動します。

    [ユーザー] ページに移動

  2. [ユーザーの追加] をクリックします。

  3. メールアドレスとパスワードを入力します。

  4. [保存] をクリックします。新しいユーザーがユーザーリストに表示されます。

ユーザーのログインを行う

  1. index.html という名前の新しいファイルを作成します。

  2. 2 つの簡易 HTML コンテナを追加します。

    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    
  3. API キーを使用して Identity Platform Client SDK を初期化します。

    1. Cloud Console で [ID プロバイダ] ページに移動します。

      [ID プロバイダ] ページに移動

    2. [アプリケーション設定の詳細] をクリックします。

    3. 初期化コードを index.html にコピーします。次のようになります。

      <script src="https://www.gstatic.com/firebasejs/8.0.2/firebase.js"></script>
      <script>
        // Initialize Identity Platform
        var config = {
          apiKey: "abcdefg123456",
          authDomain: "myproject.firebaseapp.com"
        };
        firebase.initializeApp(config);
      </script>
      
  4. signInWithEmailAndPassword() を呼び出してユーザーのログインを行い、onAuthStateChanged() コールバックで結果を処理します。以下の例では、emailpassword を、先に作成したユーザーの値で置き換えます。

    <script>
      var email = "example@gmail.com";
      var password = "hunter2";
    
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
        } else {
          document.getElementById("message").innerHTML = "No user signed in.";
        }
      });
    
      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        document.getElementById("message").innerHTML = error.message;
      });
    </script>
    
  5. ウェブブラウザで index.html を起動します。ユーザーのメールアドレスを示すウェルカム メッセージが表示されます。

これで、Identity Platform で最初のユーザーでのログインが完了しました。

次のステップ

実際のアプリでは、アプリのユーザーは専用の登録ページを使用して登録し、メールアドレスとパスワードを入力してログインします。Identity Platform には、これらのページに使用できる組み込み認証 UI が用意されています。また、独自の UI を構築することもできます。ソーシャル プロバイダ(Facebook や Google など)、電話番号、OIDC、SAML など、追加のログイン方法もサポートすることも可能です。

手順の詳細については、以下のリンク先をご覧ください。