Google サインインを Expo (React Native) で構築する方法

新しい友達のために:

Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud とオープンソースの両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのに役立ちます。認証 (Authentication)、認可 (Authorization)、マルチテナント管理をすべて一つにまとめて楽しんでください。

Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。

この記事では、Expo (React Native) と Logto を使用して、Google サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。

前提条件

稼働中の Logto インスタンス。紹介ページをチェックして始めてください。
Expo (React Native) の基本的な知識。
使用可能な Google アカウント。

Logto でアプリケーションを作成する

Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。これは、複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートし、一般的にシングルサインオン (SSO) と呼ばれます。

あなたのネイティブアプリアプリケーションを作成するには、次の手順に従ってください：

Logto コンソールを開きます。「Get started」セクションで、「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、利用可能なすべての "ネイティブアプリ" フレームワークをフィルタリングするか、"ネイティブアプリ" セクションをクリックします。"Expo" フレームワークカードをクリックして、アプリケーションの作成を開始します。
アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

🎉 タダーン！Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験を確認してください。

Expo SDK を統合する

ヒント:

次のデモンストレーションは Expo ~50.0.6 上で構築されています。
サンプルプロジェクトは、私たちの SDK リポジトリで利用可能です。

インストール

お気に入りのパッケージマネージャーを使用して Logto SDK とピア依存関係をインストールします：

npm
Yarn
pnpm

npm i @logto/rn
npm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

yarn add @logto/rn
yarn add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

pnpm add @logto/rn
pnpm add expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage

@logto/rn パッケージは Logto の SDK です。残りのパッケージはそのピア依存関係です。これらは直接の依存関係としてリストされることができませんでした。なぜなら、Expo CLI はネイティブモジュールのすべての依存関係がルートプロジェクトの package.json に直接インストールされることを要求するからです。

注記:

ベア React Native アプリにこれをインストールする場合は、これらの追加のインストール手順に従う必要があります。

Logto プロバイダーを初期化する

LogtoProvider をインポートして使用し、Logto コンテキストを提供します：

App.tsx
import { LogtoProvider, LogtoConfig } from '@logto/rn';

const config: LogtoConfig = {
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

詳細に入る前に、エンドユーザー体験の概要を簡単にご紹介します。サインインプロセスは次のようにシンプルにまとめられます：

アプリがサインインメソッドを呼び出します。
ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合は、システムブラウザが開かれます。
ユーザーがサインインし、アプリ（リダイレクト URI として設定）に戻されます。

この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。

リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。

Logto Console のアプリケーション詳細ページに移動します。ネイティブリダイレクト URI（例：io.logto://callback）を追加し、「保存」をクリックします。

iOS の場合、ASWebAuthenticationSession クラスがリダイレクト URI を登録されているかどうかに関係なくリッスンするため、リダイレクト URI スキームは実際には重要ではありません。
Android の場合、リダイレクト URI スキームは Expo の app.json ファイルに記入する必要があります。例えば：
app.json
```
{
  "expo": {
    "scheme": "io.logto"
  }
}
```

さて、アプリに戻って、useLogto フックを使用してサインインとサインアウトを行うことができます：

App.tsx
import { useLogto } from '@logto/rn';
import { Button } from 'react-native';

const Content = () => {
  const { signIn, signOut, isAuthenticated } = useLogto();

  return (
    <div>
      {isAuthenticated ? (
        <Button title="Sign out" onPress={async () => signOut()} />
      ) : (
        // リダイレクト URI を自分のものに置き換えてください
        <Button title="Sign in" onPress={async () => signIn('io.logto://callback')} />
      )}
    </div>
  );
};

チェックポイント: アプリケーションをテストする

これで、アプリケーションをテストできます：

アプリケーションを実行すると、サインインボタンが表示されます。
サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

Google コネクターを追加する

迅速なサインインを有効にし、ユーザーコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Expo を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

ソーシャルコネクターを追加するには、次の手順に従ってください：

Console > Connectors > Social Connectors に移動します。
「Add social connector」をクリックし、「Google」を選択します。
README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。

注記:

インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。

Google OAuth アプリを設定する

ステップ 1: Google Auth Platform でプロジェクトを作成する

Google を認証 (Authentication) プロバイダーとして利用する前に、Google Cloud Console でプロジェクトを作成し、OAuth 2.0 認証情報を取得する必要があります。すでにプロジェクトがある場合は、このステップをスキップできます。

Google Cloud Console にアクセスし、Google アカウントでサインインします。
上部メニューバーの プロジェクトを選択 ボタンをクリックし、新しいプロジェクト ボタンをクリックしてプロジェクトを作成します。
作成したプロジェクトで、API とサービス > OAuth 同意画面 に移動し、アプリを設定します：
- アプリ情報：同意画面に表示される アプリケーション名 と サポートメール を入力します
- オーディエンス (Audience)：希望するオーディエンスタイプを選択します：
  - 内部 - 組織内の Google Workspace ユーザーのみ
  - 外部 - すべての Google ユーザー向け（本番利用には検証が必要）
- 連絡先情報：Google からプロジェクトの変更通知を受け取るためのメールアドレスを入力します
- Google のポリシーに同意します にチェックを入れて基本設定を完了します
必要に応じて ブランディング セクションで製品情報を編集し、アプリロゴ をアップロードできます。OAuth 同意画面に表示され、ユーザーがアプリを認識しやすくなります。

ヒント:

外部オーディエンスタイプを選択した場合、開発中はテストユーザーを追加し、本番利用時にはアプリを公開する必要があります。

ステップ 2: OAuth 2.0 認証情報を作成する

Google Cloud Console の認証情報ページに移動し、アプリケーション用の OAuth 認証情報を作成します。

認証情報を作成 > OAuth クライアント ID をクリックします。
アプリケーションの種類として ウェブアプリケーション を選択します。
OAuth クライアントの名前を入力します。これは認証情報の識別用で、エンドユーザーには表示されません。
許可済み URI を設定します：
- 許可済み JavaScript オリジン：Logto インスタンスのオリジン（例：https://your-logto-domain.com）を追加します
- 許可済みリダイレクト URI：Logto の Callback URI を追加します（Logto Google コネクターからコピー）
作成をクリックして OAuth クライアントを生成します。

ステップ 3: Logto コネクターに認証情報を設定する

OAuth クライアント作成後、Google から認証情報が表示されます：

クライアント ID をコピーし、Logto の clientId フィールドに貼り付けます
クライアントシークレット をコピーし、Logto の clientSecret フィールドに貼り付けます
Logto で 保存して完了 をクリックし、アイデンティティシステムと Google を接続します

警告:

クライアントシークレットは安全に保管し、クライアントサイドのコードで絶対に公開しないでください。漏洩した場合は直ちに新しいものを発行してください。

ステップ 4: スコープを設定する

スコープ (Scope) は、アプリがユーザーから要求する権限を定義し、Google アカウントからどのデータにアクセスできるかを制御します。

Google Cloud Console でスコープを設定する

API とサービス > OAuth 同意画面 > スコープ に移動します。
スコープを追加または削除 をクリックし、アプリに必要なスコープのみを選択します：
- 認証 (Authentication)（必須）：
  - https://www.googleapis.com/auth/userinfo.email
  - https://www.googleapis.com/auth/userinfo.profile
  - openid
- API アクセス（任意）：アプリに必要な追加スコープを追加します（例：Drive、Calendar、YouTube）。利用可能なサービスは Google API ライブラリで確認できます。基本権限以外の Google API へアクセスする場合は、まず Google API ライブラリで該当 API（例：Google Drive API、Gmail API、Calendar API）を有効化してください。
更新をクリックして選択を確定します。
保存して続行 をクリックして変更を適用します。

Logto でスコープを設定する

ニーズに応じて、以下のいずれかの方法を選択してください：

オプション 1: 追加の API スコープが不要な場合

Logto Google コネクターの Scopes フィールドは空欄のままにします。
デフォルトで openid profile email スコープがリクエストされ、Logto が基本的なユーザー情報を正しく取得できます。

オプション 2: サインイン時に追加スコープをリクエストする場合

必要なすべてのスコープを Scopes フィールドにスペース区切りで入力します。
ここに記載したスコープがデフォルトを上書きするため、必ず認証 (Authentication) 用スコープ（https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid）を含めてください。
スコープはフル URL で記載します。例：https://www.googleapis.com/auth/calendar.readonly

オプション 3: 後からインクリメンタルにスコープをリクエストする場合

ユーザーがサインインした後、必要に応じてフェデレーテッドソーシャル認可 (Authorization) フローを再実行し、ユーザーのトークンセットを更新することで追加スコープをリクエストできます。
これらの追加スコープは Logto Google コネクターの Scopes フィールドに記載する必要はなく、Logto の Social Verification API を通じて実現できます。

これらの手順に従うことで、Logto Google コネクターはアプリに必要な権限だけをリクエストします。

ヒント:

アプリがこれらのスコープをリクエストして Google API へアクセス・操作する場合は、Logto Google コネクターで 永続的な API アクセス用にトークンを保存 を有効にしてください。詳細は次のセクションを参照してください。

ステップ 5: 認証 (Authentication) プロンプトをカスタマイズする

Logto で Prompts を設定し、ユーザー認証 (Authentication) 体験を制御できます。Prompts は、必要なユーザーインタラクションの種類を指定する文字列配列です：

none - 認可 (Authorization) サーバーは認証 (Authentication) や同意画面を表示しません。ユーザーがすでに認証 (Authentication) 済みかつ要求されたスコープに事前同意していない場合はエラーを返します。既存の認証 (Authentication) や同意の有無を確認する用途です。
consent - 認可 (Authorization) サーバーはクライアントに情報を返す前にユーザーに同意を求めます。Google API への オフラインアクセス を有効にするには必須です。
select_account - 認可 (Authorization) サーバーはユーザーにアカウント選択を促します。複数の Google アカウントを持つユーザーが認証 (Authentication) に使用するアカウントを選択できます。

ステップ 6: 一般設定

Google への接続自体には影響しませんが、エンドユーザーの認証 (Authentication) 体験に関わる一般的な設定です。

プロフィール情報の同期

Google コネクターでは、ユーザー名やアバターなどのプロフィール情報の同期ポリシーを設定できます。選択肢は以下の通りです：

サインアップ時のみ同期：ユーザーが初回サインインしたときにプロフィール情報を取得します。
サインイン時に常に同期：ユーザーがサインインするたびにプロフィール情報を更新します。

Google API へのトークン保存（任意）

Google API へアクセスし、ユーザーの認可 (Authorization) のもとで操作を行いたい場合（ソーシャルサインインやアカウント連携経由）、Logto は特定の API スコープを取得し、トークンを保存する必要があります。

必要なスコープを Google Cloud Console の OAuth 同意画面設定と Logto Google コネクターに追加します。
Logto Google コネクターで 永続的な API アクセス用にトークンを保存 を有効にします。Logto は Google のアクセストークン (Access token) およびリフレッシュトークン (Refresh token) を Secret Vault に安全に保存します。
リフレッシュトークン (Refresh token) を確実に取得するため、Logto Google コネクターの設定を以下のようにします：
- Prompts に consent を含める
- オフラインアクセス を有効にする

警告:

Logto の Scope フィールドに offline_access を追加する必要はありません。追加するとエラーになる場合があります。Google ではオフラインアクセスが有効な場合、自動的に access_type=offline が使用されます。

ステップ 7: Google One Tap を有効にする（任意）

Google One Tap は、ユーザーが Google アカウントでポップアップインターフェースを使ってウェブサイトにサインインできる安全かつシームレスな方法です。

Google コネクターのセットアップが完了すると、コネクター詳細ページに Google One Tap 用のカードが表示されます。スイッチを切り替えて Google One Tap を有効にします。

Google One Tap の設定オプション

条件を満たせば自動で認証情報を選択 - 特定条件を満たす場合、Google アカウントで自動的にサインインします
ユーザーが外側をクリック／タップしたらプロンプトをキャンセル - ユーザーがプロンプト外をクリックまたはタップした場合、Google One Tap プロンプトを閉じます。無効の場合、ユーザーは閉じるボタンをクリックしてプロンプトを閉じる必要があります。
ITP ブラウザでアップグレードされた One Tap UX を有効化 - Intelligent Tracking Prevention (ITP) ブラウザでアップグレードされた Google One Tap ユーザー体験を有効にします。詳細はこちらのドキュメントを参照してください。

警告:

OAuth クライアント設定の 許可済み JavaScript オリジン セクションにドメインを追加してください。追加しないと Google One Tap は表示できません。

Google One Tap の重要な制限事項

永続的な API アクセス用にトークンを保存 と Google One Tap の両方を有効にしても、アクセストークン (Access token) やリクエストしたスコープは自動的には取得できません。

Google One Tap サインイン（標準の「Google でサインイン」ボタンとは異なり）は、OAuth アクセストークン (Access token) を発行しません。ID トークン (ID token)（署名付き JWT）だけが返され、ユーザーのアイデンティティは検証できますが、API アクセス権は付与されません。

Google One Tap ユーザーで Google API へアクセスするには、Logto の Social Verification API を使って、ユーザーが Google One Tap でサインインした後にフェデレーテッドソーシャル認可 (Authorization) フローを再実行してください。これにより、必要な追加スコープをリクエストし、ユーザーのトークンセットを更新できます。Logto Google コネクターのスコープ事前設定は不要です。この方法によりインクリメンタル認可 (Authorization) が可能となり、アプリが実際に必要とするタイミングでのみ追加権限の同意をユーザーに求められます。

Google One Tap の制限事項については公式ドキュメントもご参照ください。

ステップ 8: アプリのテストと公開

内部アプリの場合

Google の オーディエンス (Audience) タイプが内部の場合、アプリは組織内の Google Workspace ユーザーのみ利用可能です。組織の任意のアカウントでテストできます。

外部アプリの場合

オーディエンス (Audience) タイプが外部の場合：

開発中：OAuth 同意画面 > テストユーザー に移動し、テストユーザーのメールアドレスを追加します。これらのユーザーのみがアプリでサインインできます。
本番利用時：OAuth 同意画面セクションで アプリを公開 をクリックし、すべての Google アカウントユーザーが利用できるようにします。

注記:

センシティブまたは制限付きスコープを持つアプリは、公開前に Google の検証が必要な場合があります。このプロセスには数週間かかることがあります。

設定を保存する

Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、Google コネクターが利用可能になります。

ソーシャルコネクターを正常に作成したら、サインイン体験で「Google で続行」ボタンとして有効にすることができます。

Console > サインイン体験 > サインアップとサインインに移動します。
（オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
設定済みの Google コネクターを「ソーシャルサインイン」セクションに追加します。

テストと検証

Expo (React Native) アプリに戻ります。これで Google を使用してサインインできるはずです。お楽しみください！

さらなる読み物

エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。

認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。

組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。

顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。

Logto でアプリケーションを作成する​

Expo SDK を統合する​

インストール​

Logto プロバイダーを初期化する​

サインインとサインアウトを実装する​

リダイレクトベースのサインインについて​

チェックポイント: アプリケーションをテストする​

Google コネクターを追加する​

Google OAuth アプリ を設定する​

ステップ 1: Google Auth Platform でプロジェクトを作成する​

ステップ 2: OAuth 2.0 認証情報を作成する​

ステップ 3: Logto コネクターに認証情報を設定する​

ステップ 4: スコープを設定する​

Google Cloud Console でスコープを設定する​

Logto でスコープを設定する​

ステップ 5: 認証 (Authentication) プロンプトをカスタマイズする​

ステップ 6: 一般設定​

プロフィール情報の同期​

Google API へのトークン保存（任意）​

ステップ 7: Google One Tap を有効にする（任意）​

Google One Tap の設定オプション​

Google One Tap の重要な制限事項​

ステップ 8: アプリのテストと公開​

内部アプリの場合​

外部アプリの場合​

設定を保存する​

サインイン体験で Google コネクターを有効にする​

テストと検証​

さらなる読み物​

Logto でアプリケーションを作成する

Expo SDK を統合する

インストール

Logto プロバイダーを初期化する

サインインとサインアウトを実装する

リダイレクトベースのサインインについて

チェックポイント: アプリケーションをテストする

Google コネクターを追加する

Google OAuth アプリを設定する

ステップ 1: Google Auth Platform でプロジェクトを作成する

ステップ 2: OAuth 2.0 認証情報を作成する

ステップ 3: Logto コネクターに認証情報を設定する

ステップ 4: スコープを設定する

Google Cloud Console でスコープを設定する

Logto でスコープを設定する

ステップ 5: 認証 (Authentication) プロンプトをカスタマイズする

ステップ 6: 一般設定

プロフィール情報の同期

Google API へのトークン保存（任意）

ステップ 7: Google One Tap を有効にする（任意）

Google One Tap の設定オプション

Google One Tap の重要な制限事項

ステップ 8: アプリのテストと公開

内部アプリの場合

外部アプリの場合

設定を保存する

サインイン体験で Google コネクターを有効にする

テストと検証

さらなる読み物