---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/embedded-auth/python/introduction/
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "埋め込み認証タイプ"
    url: /ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/
  - name: "ユーザー管理"
    url: /ja/cloud-scale/help/authentication/user-management/introduction/
  - name: "カスタムユーザー検証"
    url: /ja/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/
  - name: "IDプロバイダー"
    url: /ja/cloud-scale/help/authentication/social-logins/introduction/
  - name: "Python SDK"
    url: /ja/sdk/python/v1/overview/
---


# はじめに

このチュートリアルでは、カスタムユーザー検証ファンクションを備えたEmbedded認証タイプを使用して認証されたエンドユーザーがアプリケーションにログインできるシンプルなクライアントアプリケーションの構築を支援します。Embedded認証タイプでは、ログイン要素をアプリケーション内にiFrameとして読み込むことができます。

Embedded Authorization Portalアプリケーションは、以下のCatalystサービスとそれぞれのコンポーネントを使用します：

- Catalyst Cloud Scale
    - **Authentication**: エンドユーザーは、Catalyst固有の認証タイプであるEmbedded Authenticationを使用してアプリケーションに認証されます。
    - **Web Client Hosting**: アプリケーションのフロントエンドは、Web Client Hostingコンポーネントを使用してCatalyst上にホスティングされます。クライアントをBasic web appおよびReactアプリとして初期化・設定します。
- Catalyst Serverless
    - **Functions**: *カスタムユーザー検証*を実装するためのロジックをコーディングするためにBasic I/Oファンクションを使用します。ファンクションは**Python**でコーディングします。

このチュートリアルは、*Embedded認証タイプ*のさまざまな機能の使用方法を理解するのに役立ちます。このチュートリアルでは、以下の機能を組み込みます：

- メールアドレスを使用してWebアプリにサインアップ
- サインアップしたアカウント情報を使用してアプリにログイン
- 以下のIDプロバイダーログインのいずれかまたはすべてを使用してアプリにログイン：
    - Zoho
    - Google
    - Microsoft 365
    - LinkedIn
    - Facebook
- エンドユーザーがパスワードを忘れた場合のパスワードリセットオプション
- **メール確認**および**パスワードリセット**メールテンプレートの設定
- カスタムユーザー検証ファンクションの設定と追加
- アプリケーションにログイン後のプロフィール情報の表示
- アプリケーションからのログアウト

以下は、クライアントアプリケーションの表示例です：


動作中のアプリケーションにアクセスして機能をテストできます：アプリを試す！

このアプリケーションでは、Authenticationコンポーネントの以下の機能を使用します：

* **ユーザー管理**: ユーザープロフィールは、アプリケーションにサインアップすると、このセクションに自動的に保存されます。この機能を使用して、エンドユーザーのアプリケーションへのアクセスを管理し、ロールを設定できます。

* **認証タイプ**: アプリケーションに設定した認証タイプを表示し、必要に応じて設定を編集できます。

* **ホワイトリスト**: このセクションを使用してカスタムユーザー検証を有効にします。また、このセクションを使用してアプリケーションへのCORSおよびiFrameアクセスを有効にすることもできます。

* **メールテンプレート**: このセクションから、*メール確認*および*パスワードリセット*メールを設定・カスタマイズできます。

Catalyst WebコンソールとCatalystコマンドラインインターフェース（CLI）を使用してこのアプリケーションを構築します。

このチュートリアルでは、プロジェクトのファンクションディレクトリとクライアントディレクトリに含めるファイルのコードが提供されます。提供されたコードをコピーするか、必要に応じてカスタマイズし、指示に従って適切なファイルに貼り付けることができます。

### アプリケーションアーキテクチャ

Authorization Portalのアプリケーションロジックは以下の通りです：

* **ログインプロセス**: エンドユーザーはログインページに誘導されます。**Zoho**、**Google**、**LinkedIn**、**Microsoft 365**、または**Facebook**のIDプロバイダーログインを使用してアプリケーションにログインするか、提供された**Sign Up**オプションをクリックしてメールアドレスを使用してサインアップできます。

* **カスタムユーザー検証**: ログインプロセス中にエンドユーザーが入力した詳細情報は、*カスタムユーザー検証*ファンクションにJSON入力として送信されます。*Basic I/Oファンクション*に存在するカスタムロジックに従って詳細情報が正常に検証されると、確認メールがトリガーされます。

* **メール確認のトリガー**: ユーザーがアプリケーションにサインアップすると、アカウント登録に使用したメールアドレスにメール確認メールが送信されます。メール確認の内容とスタイルは、*Authentication*の*メールテンプレート*機能を使用して好みに合わせてカスタマイズできます。

* **パスワード設定**: エンドユーザーがメール確認メール内のリンクをクリックすると、パスワード設定ページに誘導されます。ここで、エンドユーザーは好みのパスワードを設定してアカウントを保護できます。

* **エンドユーザーアカウントの作成**: パスワードが設定されると、ユーザーアカウントが作成され、エンドユーザーは作成した資格情報を使用してアプリケーションにログインできるようになります。*Authentication*コンポーネントの*ユーザー管理*セクションでアカウントの詳細を表示して、アカウントが作成されたことを確認できます。

* **パスワードリセットオプション**: エンドユーザーは、ログインページの**Forgot Password**オプションを選択してパスワードをリセットできます。その後、以前のパスワードのいずれかを入力してアカウントを復旧するか、リセットオプションに進むよう求められます。リセットオプションに進むと、ワンタイムパスワード（OTP）メールがユーザーに送信されます。OTPが確認されると、アカウントの新しいパスワードを設定できます。

注: 

* Catalyst固有の認証タイプであるEmbedded Loginメソッドを使用しているため、アプリケーションのWebクライアントに追加できるネイティブログインフォームのスクリプトが提供されます。スクリプトに記載されたCSSファイルを設定することで、ログイン要素とパスワードリセット要素のデザインとブランディングをカスタマイズすることもできます。iFrameとログイン要素のスタイルについては、Embedded認証タイプのスタイリングヘルプセクションを参照してください。
   
* Forgot Passwordオプションを選択する代わりに、エンドユーザーはアプリ管理者に連絡して資格情報をリセットしてもらうこともできます。ユーザー管理機能を使用して、パスワードをリセットするためのリンクと手順を含むパスワードリセットメールをCatalystからユーザーに送信できます。このメールはメールテンプレート機能を使用してスタイリングできます。