Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのをサポートします。 認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しめます。
Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。
この記事では、Flutter と Logto を使用して、SAML サインイン体験(ユーザー認証 (Authentication))を迅速に構築する手順を説明します。
前提条件
Logto でアプリケーションを作成する
Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートしており、一般的にシングルサインオン (SSO) と呼ばれます。
あなたの ネイティブアプリ アプリケーションを作成するには、次の手順に従ってください:
- Logto コンソール を開きます。「Get started」セクションで「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
- 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、すべての利用可能な "ネイティブアプリ" フレームワークをフィルタリングするか、"ネイティブアプリ" セクションをクリックします。"Flutter" フレームワークカードをクリックして、アプリケーションの作成を開始します。
- アプリケーション名を入力します。例:「Bookstore」と入力し、「Create application」をクリックします。
🎉 タダーン!Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験がどのようになるかを確認してください。
Flutter SDK を統合する
- SDK パッケージは pub.dev と Logto の GitHub リポジトリ で利用可能です。
- サンプルプロジェクトは Flutter material を使用して構築されています。pub.dev で見つけることができます。
- この SDK は iOS、Android、Web プラットフォームの Flutter アプリケーションと互換性があります。他のプラットフォームとの互換性はテストされていません。
インストール
- pub.dev
- GitHub
logto_dart_sdk package
を pub パッケージマネージャーを使用して直接インストールできます。
プロジェクトのルートで次のコマンドを実行してください:
flutter pub add logto_dart_sdk
または、次の内容を pubspec.yaml
ファイルに追加してください:
dependencies:
logto_dart_sdk: ^3.0.0
その後、次を実行します:
flutter pub get
SDK の独自バージョンをフォークしたい場合は、GitHub からリポジトリを直接クローンできます。
git clone https://github.com/logto-io/dart
依存関係と構成
SDK バージョンの互換性
Logto SDK バージョン | Dart SDK バージョン | Dart 3.0 互換性 |
---|---|---|
< 2.0.0 | >= 2.17.6 < 3.0.0 | false |
>= 2.0.0 < 3.0.0 | >= 3.0.0 | true |
>= 3.0.0 | >= 3.6.0 | true |
flutter_secure_storage のセットアップ
この SDK は、クロスプラットフォームの永続的なセキュアトークンストレージを実装するために flutter_secure_storage を使用しています。
- iOS では Keychain が使用されます。
- Android では AES 暗号化が使用されます。
Android バージョンの設定
プロジェクトの android/app/build.gradle
ファイルで android:minSdkVersion を >= 18
に設定します。
android {
...
defaultConfig {
...
minSdkVersion 18
...
}
}
Android での自動バックアップの無効化
デフォルトでは、Android は Google Drive にデータをバックアップします。これにより、例外 java.security.InvalidKeyException:Failed
が発生する可能性があります。これを避けるために、
-
自動バックアップを無効にするには、アプリのマニフェストファイルに移動し、
android:allowBackup
とandroid:fullBackupContent
属性をfalse
に設定します。AndroidManifest.xml<manifest ... >
...
<application
android:allowBackup="false"
android:fullBackupContent="false"
...
>
...
</application>
</manifest> -
FlutterSecureStorage
からsharedprefs
を除外します。アプリのために
android:fullBackupContent
を無効にするのではなく保持する必要がある場合は、バックアップからsharedprefs
ディレクトリを除外できます。 詳細は Android ドキュメント を参照してください。AndroidManifest.xml ファイルで、次の例のように
<application>
要素に android:fullBackupContent 属性を追加します。この属性は、バックアップルールを含む XML ファイルを指します。AndroidManifest.xml<application ...
android:fullBackupContent="@xml/backup_rules">
</application>res/xml/
ディレクトリに@xml/backup_rules
という名前の XML ファイルを作成します。このファイルに<include>
と<exclude>
要素を使用してルールを追加します。次のサンプルは、device.xml を除くすべての共有設定をバックアップします:@xml/backup_rules<?xml version="1.0" encoding="utf-8"?>
<full-backup-content>
<exclude domain="sharedpref" path="FlutterSecureStorage"/>
</full-backup-content>
詳細については、flutter_secure_storage を確認してください。
flutter_web_auth_2 のセットアップ
この SDK は、Logto でユーザーを認証 (Authentication) するために flutter_web_auth_2 を使用しています。このパッケージは、システム WebView またはブラウザを使用して Logto でユーザーを認証 (Authentication) するための簡単な方法を提供します。
このプラグインは、iOS 12+ および macOS 10.15+ では ASWebAuthenticationSession
を、iOS 11 では SFAuthenticationSession
を、Android では Chrome Custom Tabs
を使用し、Web では新しいウィンドウを開きます。
-
iOS: 追加のセットアップは不要
-
Android: Android でコールバック URL を登録
Logto のサインイン Web ページからコールバック URL をキャプチャするために、サインイン redirectUri を
AndroidManifest.xml
ファイルに登録する必要があります。AndroidManifest.xml<manifest>
<application>
<activity
android:name="com.linusu.flutter_web_auth_2.CallbackActivity"
android:exported="true">
<intent-filter android:label="flutter_web_auth_2">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
</intent-filter>
</activity>
</application>
</manifest> -
Web ブラウザ: コールバック URL を処理するエンドポイントを作成
Web プラットフォームを使用している場合、コールバック URL を処理し、
postMessage
API を使用してアプリケーションに返すエンドポイントを作成する必要があります。callback.html<!doctype html>
<title>Authentication complete</title>
<p>認証 (Authentication) が完了しました。自動的に閉じない場合は、ウィンドウを閉じてください。</p>
<script>
function postAuthenticationMessage() {
const message = {
'flutter-web-auth-2': window.location.href,
};
if (window.opener) {
window.opener.postMessage(message, window.location.origin);
window.close();
} else if (window.parent && window.parent !== window) {
window.parent.postMessage(message, window.location.origin);
} else {
localStorage.setItem('flutter-web-auth-2', window.location.href);
window.close();
}
}
postAuthenticationMessage();
</script>
詳細については、flutter_web_auth_2 パッケージのセットアップガイドを確認してください。
統合
LogtoClient を初期化する
logto_dart_sdk
パッケージをインポートし、アプリケーションのルートで LogtoClient
インスタンスを初期化します。
import 'package:logto_dart_sdk/logto_dart_sdk.dart';
import 'package:http/http.dart' as http;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Logto Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late LogtoClient logtoClient;
void render() {
// state change
}
// LogtoConfig
final logtoConfig = const LogtoConfig(
endpoint: "<your-logto-endpoint>",
appId: "<your-app-id>"
);
void _init() {
logtoClient = LogtoClient(
config: logtoConfig,
httpClient: http.Client(), // Optional http client
);
render();
}
void initState() {
super.initState();
_init();
}
// ...
}
サインインを実装する
詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます:
- あなたのアプリがサインインメソッドを呼び出します。
- ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合、システムブラウザが開かれます。
- ユーザーがサインインし、あなたのアプリにリダイレクトされます(リダイレクト URI として設定されています)。
リダイレクトベースのサインインについて
- この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
- 複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。
リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。
始める前に、アプリケーションのために管理コンソールでリダイレクト URI を追加する必要があります。
Logto コンソールのアプリケーション詳細ページに切り替えましょう。リダイレクト URI io.logto://callback
を追加し、「変更を保存」をクリックします。
- iOS の場合、
ASWebAuthenticationSession
クラスがリダイレクト URI を登録しているかどうかに関係なくリダイレクト URI をリッスンするため、リダイレクト URI スキームは実際には重要ではありません。 - Android の場合、リダイレクト URI スキームは
AndroidManifest.xml
ファイルに登録する必要があります。
リダイレクト URI が設定されたら、ページにサインインボタンを追加し、logtoClient.signIn
API を呼び出して Logto サインインフローを開始します:
class _MyHomePageState extends State<MyHomePage> {
// ...
final redirectUri = 'io.logto://callback';
Widget build(BuildContext context) {
// ...
Widget signInButton = TextButton(
onPressed: () async {
await logtoClient.signIn(redirectUri);
render();
},
child: const Text('Sign In'),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
signInButton,
],
),
),
);
}
}
サインアウトを実装する
Logto コンソールのアプリケーション詳細ページに切り替えましょう。ポストサインアウトリダイレクト URI
io.logto://callback
を追加し、「変更を保存」をクリックします。
ポストサインアウトリダイレクト URI は、サインアウト後にリダイレクトする場所を示す OAuth 2.0 の概念です。
次に、メインページにサインアウトボタンを追加して、ユーザーがアプリケーションからサインアウトできるようにします。
class _MyHomePageState extends State<MyHomePage> {
// ...
final postSignOutRedirectUri = 'io.logto//home';
Widget build(BuildContext context) {
// ...
Widget signOutButton = TextButton(
onPressed: () async {
await logtoClient.signOut(postSignOutRedirectUri);
render();
},
child: const Text('Sign Out'),
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
signInButton,
signOutButton,
],
),
),
);
}
}
認証 (Authentication) ステータスを処理する
Logto SDK は、認証 (Authentication) ステータスを確認するための非同期メソッドを提供します。このメソッドは logtoClient.isAuthenticated
です。このメソッドは、ユーザーが認証 (Authentication) されている場合は true
を、そうでない場合は false
を返します。
この例では、認証 (Authentication) ステータスに基づいてサインインボタンとサインアウトボタンを条件付きでレンダリングします。次に、状態変更を処理するために Widget の render
メソッドを更新しましょう:
class _MyHomePageState extends State<MyHomePage> {
// ...
bool? isAuthenticated = false;
void render() {
setState(() async {
isAuthenticated = await logtoClient.isAuthenticated;
});
}
Widget build(BuildContext context) {
// ...
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SelectableText('My Demo App'),
isAuthenticated == true ? signOutButton : signInButton,
],
),
),
);
}
}
チェックポイント: アプリケーションをテストする
これで、アプリケーションをテストできます:
- アプリケーションを実行すると、サインインボタンが表示されます。
- サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
- サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
- サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。
SAML コネクターを追加する
迅速なサインインを可能にし、ユーザーのコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Flutter を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。
ソーシャルコネクターを追加するには、次の手順に従ってください:
- Console > Connectors > Social Connectors に移動します。
- 「ソーシャルコネクターを追加」をクリックし、「SAML」を選択します。
- README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。
Standard SAML app を設定する
ソーシャル IdP のアカウントを作成し、SAML アプリケーションを登録する (IdP)
SAML コネクターの設定を見ていきましょう。
始める前に、SAML プロトコルをサポートするソーシャルアイデンティティプロバイダーにアクセスし、自分のアカウントを作成できます。Okta、OneLogin、Salesforce などのプラットフォームは、SAML プロトコルに基づく認証 (Authentication) をサポートしています。
IdP が SAML アサーションの暗号化と署名された認証 (Authentication) リクエストの受信を必須とする場合、RSA アルゴリズムを使用してプライベートキーと対応する証明書を生成する必要があります。プライベートキーは SP 用に保持し、証明書を IdP にアップロードしてください。
また、IdP の SAML アサーションを処理するために ACS (Assertion Consumer Service) URL を ${your_logto_origin}/api/authn/saml/${connector_id}
として設定する必要があります。connectorId
は Logto の管理コンソールの SAML コネクターの詳細ページで見つけることができます。
現在の Logto の設計では、認証 (Authentication) リクエストの送信にはリダイレクトバインディングのみをサポートし、SAML アサーションの受信には POST バインディングのみをサポートしています。これはあまりクールではないかもしれませんが、現在の設計はほとんどのユースケースを処理できると信じています。問題がある場合は、お気軽にお問い合わせください!
SAML コネクターの設定 (SP)
このセクションでは、各属性を詳細に紹介します。
entityID 必須
entityID
(つまり issuer
) はエンティティ識別子です。これは、エンティティ (SAML SP エンティティ) を識別し、各 SAML リクエスト / レスポンスでの同等性を一致させるために使用されます。
signInEndpoint 必須
SAML 認証 (Authentication) リクエストを送信する IdP のエンドポイントです。通常、この値は IdP の詳細ページ (つまり IdP の SSO URL
または Login URL
) で見つけることができます。
x509Certificate 必須
IdP のプライベートキーから生成された x509 証明書で、IdP はこの値を持っていることが期待されます。
証明書の内容は -----BEGIN CERTIFICATE-----
ヘッダーと -----END CERTIFICATE-----
テールを伴います。
idpMetadataXml 必須
このフィールドは、IdP メタデータ XML ファイルの内容を配置するために使用されます。
使用している XML パーサーはカスタマイズされた名前空間をサポートしていません。 IdP メタデータに名前空間が含まれている場合は、手動で削除する必要があります。 XML ファイルの名前空間については、参考を参照してください。
assertionConsumerServiceUrl 必須
アサーションコンシューマーサービス (ACS) URL は、IdP の SAML アサーション POST リクエストを受信する SP のエンドポイントです。前の部分で述べたように、通常は IdP 設定で設定されますが、一部の IdP はこの値を SAML 認証 (Authentication) リクエストから取得します。そのため、この値も必須フィールドとして追加しています。この値は ${your_logto_origin}/api/authn/saml/${connector_id}
のようになります。
signAuthnRequest
SAML 認証 (Authentication) リクエストに署名するかどうかを制御するブール値で、デフォルト値は false
です。
encryptAssertion
encryptAssertion
は、IdP が SAML アサーションを暗号化するかどうかを示すブール値で、デフォルト値は false
です。
signAuthnRequest
と encryptAssertion
属性は、IdP 設定の対応するパラメーターと一致する必要があります。そうでない場合、設定が一致しないことを示すエラーがスローされます。
すべての SAML レスポンスには署名が必要です。
requestSignatureAlgorithm
これは、Logto が SAML アサーションの署名を検証できるように、IdP の署名アルゴリズムと一致させる必要があります。その値は http://www.w3.org/2000/09/xmldsig#rsa-sha1
、http://www.w3.org/2001/04/xmldsig-more#rsa-sha256
または http://www.w3.org/2001/04/xmldsig-more#rsa-sha512
のいずれかであり、デフォルト値は http://www.w3.org/2001/04/xmldsig-more#rsa-sha256
です。
messageSigningOrder
messageSigningOrder
は、IdP の署名と暗号化の順序を示します。その値は sign-then-encrypt
または encrypt-then-sign
のいずれかであり、デフォルト値は sign-then-encrypt
です。
privateKey と privateKeyPass
privateKey
はオプションの値であり、signAuthnRequest
が true
の場合に必要です。
privateKeyPass
は privateKey
を作成する際に設定したパスワードで、必要に応じて必要です。
signAuthnRequest
が true
の場合、privateKey
から生成された対応する証明書が IdP によって署名の確認に必要です。
encPrivateKey と encPrivateKeyPass
encPrivateKey
はオプションの値であり、encryptAssertion
が true
の場合に必要です。
encPrivateKeyPass
は encPrivateKey
を作成する際に設定したパスワードで、必要に応じて必要です。
encryptAssertion
が true
の場合、encPrivateKey
から生成された対応する証明書が IdP によって SAML アサーションの暗号化に必要です。
キーと証明書の生成には、openssl
が素晴らしいツールです。以下は役立つかもしれないサンプルコマンドラインです:
openssl genrsa -passout pass:${privateKeyPassword} -out ${encryptPrivateKeyFilename}.pem 4096
openssl req -new -x509 -key ${encryptPrivateKeyFilename}.pem -out ${encryptionCertificateFilename}.cer -days 3650
privateKey
と encPrivateKey
ファイルは pem 文字列として pkcs1
スキームでエンコードされることが強制されており、プライベートキーのファイルは -----BEGIN RSA PRIVATE KEY-----
で始まり、-----END RSA PRIVATE KEY-----
で終わる必要があります。
nameIDFormat
nameIDFormat
は、応答する名前 ID フォーマットを宣言するオプションの属性です。値は urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified
、urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress
、urn:oasis:names:tc:SAML:1.1:nameid-format:X509SubjectName
、urn:oasis:names:tc:SAML:2.0:nameid-format:persistent
、urn:oasis:names:tc:SAML:2.0:nameid-format:transient
のいずれかであり、デフォルト値は urn:oasis:names:tc:SAML:2.0:nameid-format:unspecified
です。
timeout
timeout
は時間検証のための時間許容範囲であり、SP エンティティと IdP エンティティの間の時間が異なる可能性があり、ネットワーク接続も遅延をもたらす可能性があるためです。単位はミリ秒で、デフォルト値は 5000 (つまり 5 秒) です。
profileMap
Logto は、通常標準ではないソーシャルベンダーのプロファイルからのマッピングをカスタマイズできる profileMap
フィールドも提供しています。各 profileMap
キーは Logto の標準ユーザープロファイルフィールド名であり、対応する値はソーシャルプロファイルフィールド名である必要があります。現在の段階では、Logto はソーシャルプロファイルから 'id'、'name'、'avatar'、'email'、'phone' のみを考慮しており、'id' のみが必須で、他はオプションフィールドです。
設定タイプ
名前 | タイプ | 必須 | デフォルト値 |
---|---|---|---|
signInEndpoint | string | true | |
x509certificate | string | true | |
idpMetadataXml | string | true | |
entityID | string | true | |
assertionConsumerServiceUrl | string | true | |
messageSigningOrder | encrypt-then-sign | sign-then-encrypt | false | sign-then-encrypt |
requestSignatureAlgorithm | http://www.w3.org/2000/09/xmldsig#rsa-sha1 | http://www.w3.org/2001/04/xmldsig-more#rsa-sha256 | http://www.w3.org/2001/04/xmldsig-more#rsa-sha512 | false | http://www.w3.org/2001/04/xmldsig-more#rsa-sha256 |
signAuthnRequest | boolean | false | false |
encryptAssertion | boolean | false | false |
privateKey | string | false | |
privateKeyPass | string | false | |
nameIDFormat | urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified | urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress | urn:oasis:names:tc:SAML:1.1:nameid-format:X509SubjectName | urn:oasis:names:tc:SAML:2.0:nameid-format:persistent | urn:oasis:names:tc:SAML:2.0:nameid-format:transient | false | urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified |
timeout | number | false | 5000 |
profileMap | ProfileMap | false |
ProfileMap フィールド | タイプ | 必須 | デフォルト値 |
---|---|---|---|
id | string | false | id |
name | string | false | name |
avatar | string | false | avatar |
string | false | ||
phone | string | false | phone |
参考
- OASIS Security Assertion Markup Language (SAML) V2.0 のプロファイル
- samlify - シングルサインオンのための高度に設定可能な Node.js SAML 2.0 ライブラリ
設定を保存する
Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、SAML コネクターが利用可能になります。
サインイン体験で SAML コネクターを有効にする
ソーシャルコネクターを正常に作成すると、サインイン体験で「SAML で続行」ボタンとして有効にすることができます。
- コンソール > サインイン体験 > サインアップとサインイン に移動します。
- (オプション)ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
- 設定済みの SAML コネクターを「ソーシャルサインイン」セクションに追加します。
テストと検証
Flutter アプリに戻ります。これで SAML を使用してサインインできるはずです。お楽しみください!
さらなる読み物
エンドユーザーフロー:Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。
認可 (Authorization):認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。
組織 (Organizations):特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。
顧客 IAM シリーズ:顧客(または消費者)アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。