メインコンテンツへスキップ
Auth0を使用すると、アプリケーションに認証を迅速に追加し、ユーザープロファイル情報にアクセスできます。このガイドでは、Auth0 Flutter SDKを使用して、Auth0をFlutterアプリケーションに統合する方法を説明します。
Flutter SDK は現在、Android、iOS、または Web 上で動作する Flutter アプリケーションのみをサポートしています。
このクイックスタートは、Flutter アプリケーションがすでに稼働していることを前提としています。まだの場合は、Flutter の「はじめに」ガイドを参照して、シンプルなアプリを作成してください。Flutterコマンドラインツールについても理解しておく必要があります。
1
Auth0 にサインアップしたときに、新しいアプリケーションが作成されているか、もしくはご自身で新しくアプリケーションを作成しているはずです。 Auth0 と連携するには、そのアプリケーションに関するいくつかの情報が必要になります。これらの情報は Auth0 Dashboard の Application Settings セクションから取得できます。
Native または Single Page Application で Default App を使用する場合は、Token Endpoint Authentication Method を None に更新し、Application Type を SPA または Native のいずれかに設定してください。
次の情報が必要です。
  • Domain
  • Client ID
このページ上部からサンプルをダウンロードした場合、これらの情報はあらかじめ入力されています。

​
コールバックURLの設定

コールバックURLは、ユーザーが認証された後に Auth0 がアプリケーションへリダイレクトする URL です。 アプリのコールバックURLは、Application Settings の Allowed Callback URLs フィールドに追加する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションにログインできず、エラーが発生します。
このページ上部からダウンロードしたサンプルプロジェクトに従っている場合、Allowed Callback URL を http://localhost:3000 に設定してください。

​
ログアウトURLの設定

ログアウトURLは、ユーザーが認可サーバーからログアウトされた後に、Auth0 がアプリケーションにリダイレクトできる URL です。これは returnTo クエリパラメーターで指定されます。アプリのログアウトURLは、Application Settings の Allowed Logout URLs フィールドに追加する必要があります。このフィールドが設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが発生します。
このページ上部からダウンロードしたサンプルプロジェクトに従っている場合、Allowed Logout URLs フィールドに追加する必要があるログアウトURLは http://localhost:3000 です。

​
Allowed Web Origins の設定

アプリの URL を Application Settings の Allowed Web Origins フィールドに追加する必要があります。ここにアプリケーションの URL を登録しない場合、アプリケーションは認証トークンをサイレントリフレッシュできず、ユーザーは次回アプリケーションにアクセスしたとき、またはページを更新したときにログアウトされてしまいます。
このページ上部からダウンロードしたサンプルプロジェクトに従っている場合、Allowed Web Origins を http://localhost:3000 に設定してください。
2
Auth0 Flutter ソフトウェア開発キット (SDK) をプロジェクトに追加します：
flutter pub add auth0_flutter
次の script タグを index.html ページに追加します。
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js" defer></script>
3
Universal Login は、 アプリケーションに認証をセットアップする最も簡単な方法です。最高のエクスペリエンスとセキュリティ、そして最も充実した機能を利用するために、その使用を推奨します。Auth0Web クラスを使用して、Flutter Web アプリに Auth0 Universal Login を統合します。loginWithRedirect() を使用して、 ユーザーを Auth0 Universal Login ページにリダイレクトします。
通常は loginWithRedirect に対して redirectUrl パラメーターを指定する必要があります。これを省略すると、Auth0 は 既定のログインルート を使用しますが、これはデフォルトでは構成されていません。
ユーザーがログインすると、アプリケーションにリダイレクトされて戻ってきます。その後、起動時に onLoad を呼び出し、 渡された認証情報を処理することで、このユーザーの ID トークンとアクセストークンにアクセスできます。
auth0.onLoad().then((final credentials) => setState(() {
// ここで認証情報を処理または保存する

_credentials = credentials;

}));
チェックポイント
アプリに、loginWithRedirect() を呼び出してユーザーをアプリにログインさせるボタンを追加します。 認証のために Auth0 にリダイレクトされ、その後アプリケーションに戻ってくることを確認します。onLoad の呼び出し結果として credentials にアクセスでき、 ID トークンとアクセストークンにもアクセスできることを確認します。
4
ユーザーをログアウトさせるには、Auth0 Flutter ソフトウェア開発キット (SDK) の logout() を呼び出し、Auth0 のログアウトエンドポイントへリダイレクトしてログインセッションをクリアします。Auth0 からのログアウトの詳細はこちらをご覧ください。
通常は logout を呼び出すときに returnToUrl を指定する必要があります。指定しない場合、 Auth0 はデフォルトで、許可されたログアウトURLのリスト内の最初の URL を使用します。
チェックポイント
logout() を呼び出してアプリケーションからユーザーをログアウトさせるボタンを、アプリに追加します。 そのボタンを選択したときに、Flutter アプリがログアウトエンドポイントにリダイレクトされ、再び戻ってくることを確認してください。 アプリケーションにログインしたままになっていないことを確認してください。
5
ユーザープロファイルは、ページの読み込み時に自動的にユーザーのプロファイル情報を取得し、アプリケーションの起動時に onLoad を呼び出すことでアクセスおよび保存できます。onLoad から返されるオブジェクトには、すべてのユーザーのプロファイル情報を格納した user プロパティが含まれます。これは内部的に IDトークンをデコードして設定されます。
チェックポイント
ログインして、結果の user プロパティを確認します。email や name など、現在のユーザーのプロファイル情報が正しいことを確認してください。

​
次のステップ

素晴らしい!ここまで進めたなら、アプリケーションでログイン、ログアウト、ユーザープロファイル情報が動作しているはずです。

これでクイックスタートチュートリアルは終了ですが、他にも多くの機能があります。Auth0でできることの詳細については、以下をご確認ください:
  • Auth0 Dashboard - Auth0 テナントとアプリケーションの設定と管理について学びます
  • auth0-flutter SDK - このチュートリアルで使用するソフトウェア開発キット (SDK) についてさらに詳しく確認してください
  • Auth0 Marketplace - 有効化して Auth0 の機能を拡張できるインテグレーションを見つける