GSP186

概要

このラボでは、Identity Platform を使用してアプリケーションに認証を追加する方法を説明します。認証によりユーザーを識別し、ユーザーが行うことのできるアクションの範囲を決定します。詳しくは、認証の概要をご覧ください。

Identity Platform では、ユーザーの登録とログインを管理するカスタマイズ可能なドロップイン認証サービスを利用できます。管理 SDK（Node.js、Java、Python など）のほか、さまざまなアプリ SDK（Android、iOS、Web）に対応しているため、開発作業や管理作業が簡素化されます。Identity Platform の詳細については、Identity Platform をご覧ください。

このラボでは、オンライン クイズ アプリケーションを使用します。このアプリケーションに Identity Platform の認証を追加して、メールアドレスとパスワードのシンプルな認証情報を使用するように構成します。最後に、ユーザーがクイズを行う前に登録とログインが必要となるよう構成します。

学習内容

このラボでは、次のタスクを行います。

• クライアントサイド ウェブ アプリケーションに Identity Platform の構成を追加する
• Python のコードを記述して Identity Platform の認証をクライアントサイド ウェブ アプリケーションと統合する

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの手順をお読みください。ラボの時間は記録されており、一時停止することはできません。[ラボを開始] をクリックするとスタートするタイマーは、Google Cloud のリソースを利用できる時間を示しています。

このハンズオンラボでは、シミュレーションやデモ環境ではなく、実際のクラウド環境を使ってご自身でラボのアクティビティを行うことができます。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。

• ラボを完了するために十分な時間を確保してください。ラボをいったん開始すると一時停止することはできません。

注: すでに個人の Google Cloud アカウントやプロジェクトをお持ちの場合でも、このラボでは使用しないでください。アカウントへの追加料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるポップアップでお支払い方法を選択してください。 左側の [ラボの詳細] パネルには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウでリンクを開く] を選択します）。

   ラボでリソースが起動し、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] パネルでも [ユーザー名] を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] パネルでも [パスワード] を確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスのリストを含むメニューを表示するには、左上のナビゲーション メニューをクリックします。

Cloud Shell をアクティブにする

Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールの上部にある「Cloud Shell をアクティブにする」アイコン をクリックします。

接続した時点で認証が完了しており、プロジェクトに各自の PROJECT_ID が設定されます。出力には、このセッションの PROJECT_ID を宣言する次の行が含まれています。

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

2. （省略可）次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

3. [承認] をクリックします。

4. 出力は次のようになります。

出力:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`

5. （省略可）次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project = <project_ID>

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

Cloud Shell コードエディタを起動する

Cloud Shell ツールバーを使って、Cloud Shell を新規ウィンドウに移動します。それには [新しいウィンドウで開く] アイコン をクリックしてから [エディタを開く] アイコン をクリックしてコードエディタを起動します。

Cloud Shell ターミナルで次のコマンドを実行してプロジェクト ID を構成します。このとき <YOUR-PROJECT-ID> はラボのプロジェクト ID に置き換えます。

gcloud config set project <YOUR-PROJECT-ID>

Cloud Shell を承認します。

タスク 1. ケーススタディ用アプリケーションを準備する

このタスクでは、クイズ アプリケーションのクローンを作成し、構成して実行します。

Cloud Shell でソースコードのクローンを作成する

1. GitHub.com のリポジトリにあるアプリケーション スケルトンのクローンを作成します。

   git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. 作業ディレクトリへのショートカットとしてソフトリンクを作成します。

   ln -s ~/training-data-analyst/courses/developingapps/v1.3/python/firebase ~/firebase

ケーススタディ用アプリケーションを構成、実行する

1. このラボのサンプル ファイルが含まれているディレクトリに移動します。

   cd ~/firebase/start

2. 次のコマンドを実行して、リージョンを us-central から、実際に割り当てられているデフォルトのリージョンに変更します。

   export REGION={{{ project_0.startup_script.app_region | REGION }}} sed -i "s/us-central/$REGION/g" prepare_environment.sh

3. アプリケーションを構成します。

   . prepare_environment.sh

   このスクリプト ファイルを実行すると、以下の処理が行われます。

   • App Engine アプリケーションを作成する。
   • gs:[Project-ID]-media という名前の Cloud Storage バケットを作成する。
   • GCLOUD_PROJECT と GCLOUD_BUCKET の 2 つの環境変数をエクスポートする。
   • Python 3 対応の隔離された virtualenv Python 環境を作成して有効にする。
   • > pip install -r requirements.txt を実行する。
   • Cloud Datastore にエンティティを作成する。
   • Google Cloud Platform のプロジェクト ID を出力する。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 ケーススタディ用アプリケーションを構成する

4. アプリケーションを実行します。

   python run_server.py

ケーススタディ用アプリケーションを起動する

• Cloud Shell で [ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックして、クイズ アプリケーションをプレビューします。

このラボでは後で Cloud Shell ウェブ プレビュー ドメインが必要となるため、このウィンドウは開いたままにしておきます。

タスク 2. ケーススタディ用のアプリケーション コードを確認する

このタスクでは、ケーススタディ用のアプリケーション コードを確認します。Cloud Shell にインストールされている nano や vim などのシェル エディタや、Cloud Shell コードエディタを使用できます。

このラボでは、Cloud Shell コードエディタを使用してこのクイズ アプリケーションのコードを確認します。

Cloud Shell コードエディタを起動する

• Cloud Shell で [エディタを開く] をクリックして、コードエディタを起動します。

注: 必要に応じて、[新しいウィンドウで開く] をクリックします。[ターミナルを開く] で再びターミナルに切り替えられます。

クライアント アプリケーションを確認する

1. コード エディタの左側にあるファイル ブラウザ パネルを使用して、/firebase/start フォルダに移動します。

2. さらに、...quiz/webapp/static/client/ を開き、index.html ファイルをクリックします。

   このファイルは AngularJS シングルページ アプリケーション（SPA）の単一のページです。アプリケーションのライブラリとコード用の <script></script> タグと、SPA が動的に出力内容をレンダリングするマークアップが含まれます。

3. ...quiz/webapp/static/client/app/auth/ フォルダにある qiq-login-template.html ファイルを選択します。

   このファイルには、ログイン コンポーネント用の AngularJS のテンプレートが含まれます。また、いくつかのテキストボックスと 1 つのボタンも含まれています。ボタンにはイベント ハンドラが設定されており、クリック時にコードが実行されます。

4. 同じフォルダにある qiq-login.js ファイルを選択します。

   このファイルには、AngularJS のコンポーネントが含まれています。このコンポーネントにより、ユーザーはアプリケーションにログインしたり、登録ページに移動したりできるようになります。

タスク 3. Identity Platform の認証を構成する

ここでは、メールアドレスとパスワードを使用してユーザーがログインできるように Identity Platform を構成します。その後、クイズ アプリケーションへのログインに使用するユーザーを作成します。

Identity Platform のメールアドレスとパスワードを構成する

1. Google Cloud コンソールのナビゲーション メニュー（）で、[Identity Platform] をクリックします。

2. [Identity Platform を有効化] をクリックします。

   注: 「このサイトを離れますか？」というポップアップ メッセージが表示された場合、[離れる] をクリックします。

   Google Cloud コンソールに Identity Platform のページが表示されます。

   

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

4. [ログイン方法] ウィンドウの [プロバイダの選択] で、[メール / パスワード] を選択します。

5. [有効] をクリックします。

6. [承認済みドメイン] ペインで、[ドメインの追加] をクリックします。

7. 実行中のクイズ アプリケーションに戻り、次のような形式のドメインをコピーします

8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-{{{project_0.default_region | "REGION"}}}-ctgq.cloudshell.dev

8. [ドメイン] フィールドにドメインを貼り付けます。

9. 貼り付けたドメインを変更して、ドメイン名のみが [ドメイン] フィールドに表示されるようにします。

   「https://」とドメイン名に続く文字列（スラッシュを含む）を削除します。ドメイン名は末尾が cloudshell.dev になっている必要があります。

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

注: 後で再試行する必要があることを示すエラー メッセージを受け取った場合は、ドメイン名以外の文字列が送信された可能性があります。ダイアログ ボックスで [キャンセル] をクリックし、[ドメインを追加] をクリックして再試行してください。

11. [新しい ID プロバイダ] ウィンドウで [保存] をクリックします。

    [保存] ボタンが表示されるまでスクロールが必要になる場合があります。

ユーザーを追加する

1. [ID プラットフォーム] ペインで、[ユーザー] をクリックします。

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

3. [ユーザーを追加] ダイアログ ボックスで、次のように指定します。

   メール	user1@example.com
   パスワード	abc123!

4. [追加] をクリックします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Identity Platform の認証を構成する

タスク 4. クライアントサイド ウェブ アプリケーションを Identity Platform と統合する

このタスクでは、Identity Platform の構成をクライアントサイド ウェブ アプリケーションに適用します。

1. ナビゲーション パネルで、[プロバイダ] をクリックします。

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

3. [アプリケーションの構成] ダイアログ ボックスで、Identity Platform のマークアップをコピーします。

   

4. [閉じる] をクリックします。

5. Cloud Shell コードエディタで ...webapp/static/client/ にある index.html を開きます。

6. ページの下部にある <script></script> タグの直前に、構成のマークアップを貼り付けます。

7. index.html ファイルを保存します。

タスク 5. アプリケーションを実行する

このタスクでは、前のステップで作成した Identity Platform の認証情報を使用してクイズ アプリケーションにログインできることを確認します。その後、クイズ アプリケーションに新しいユーザーを登録し、認証情報が Identity Platform に追加されることを確認します。

1. クイズ アプリケーションに戻り、ブラウザを更新します。

2. ナビゲーション バーで、[Take Test] をクリックします。

   

3. ナビゲーション バーで、[GCP]、[People]、[Places] のいずれかをクリックします。

   注: ログインせずにテストを受けることはできないため、クイズ ページは空白になっています。

4. ナビゲーション バーで、次の無効な認証情報を入力します。

   メール	user2@example.com
   パスワード	abcd1234$

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

   注: ユーザーが登録されていないため、ログインに失敗します。

6. 前のタスクで作成した次の認証情報を入力します。

   メール	user1@example.com
   パスワード	abc123!

7. [Login] をクリックします。

   ユーザーのメールアドレスがナビゲーション バーに表示され、最初の質問が提示されます。

   注: ログインできない場合は、パスワードが正しく構成されていない可能性があります。[ID プラットフォーム] の [ユーザー] ページに戻り、user1@example.com を削除してから正しいパスワードで user1@example.com を追加します。

8. ナビゲーション バーで、[Logout] をクリックします。

9. [Register] のリンクをクリックします。

10. 新しいフォームで、次の認証情報を入力します。

    メール	user2@example.com
    パスワード	abcd1234$

11. [Register] をクリックします。

    複雑なパスワードを使用する必要があります。要件を満たすパスワードを入力すると、ログインが完了し、GCP のクイズにリダイレクトされます。

    問題に解答し、解答を送信できます。

12. ナビゲーション バーで、[Logout] をクリックします。

    注: ログアウトされ、クイズのホームページにリダイレクトされます。

13. Google Cloud コンソールの [ID プラットフォーム] ナビゲーション パネルで、[ユーザー] をクリックします。

    注: user2@example.com がユーザーとして追加されています。

お疲れさまでした

このラボでは、Identity Platform を使用して、アプリケーションのメールアドレスとパスワード登録を有効にする方法を学習しました。

クエストを完了する

このセルフペース ラボは、「Application Development - Python」クエストの一部です。クエストとは学習パスを構成する一連のラボのことで、完了すると成果が認められて上のようなバッジが贈られます。バッジは公開して、オンライン レジュメやソーシャル メディア アカウントにリンクできます。このラボの修了後、このラボが含まれるクエストに登録すれば、すぐにクレジットを受け取ることができます。受講可能な全クエストについては、Google Cloud Skills Boost カタログをご覧ください。

次のステップと詳細情報

• Firebase が使える他の Google Cloud 機能を確認するには Google Cloud オペレーション スイートのドキュメントをご覧ください。
• Deployment Manager について、詳しくは Firebase と Google Cloud をご覧ください。

マニュアルの最終更新日: 2023 年 10 月 23 日

ラボの最終テスト日: 2023 年 10 月 23 日

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。