Auth0 Flutterの使い方 Flutterでユーザー認証を簡潔に行う

2024年11月7日 19:00

今回はAuth0 Flutterについて解説していきます。

Auth0 Flutterとは

Auth0 FlutterはFlutterアプリケーションに認証・認可機能を追加するためのAuth0公式ライブラリです。

Auth0は、OAuth2.0やOpenID Connectをベースにした認証プラットフォームで、シングルサインオン（SSO）、パスワードレス認証、ソーシャルログイン、2要素認証（2FA）など、さまざまな認証機能を簡単に統合できます。Auth0 Flutterを使用することで、認証手続きやユーザーデータの管理をより安全かつ迅速に実装できます。

Auth0 Flutterの機能

シングルサインオン（SSO）とソーシャルログイン

Google、Facebook、Appleなど、主要なソーシャルアカウントを利用したログインを実装できます。

JWTトークンの取得と管理

認証後にJWT（JSON Web Token）を取得し、ユーザーのアクセス権限を管理するために利用します。

ユーザープロファイルの取得と管理

ユーザープロファイルを簡単に取得し、アプリ内でのカスタマイズに使用できます。

カスタマイズ可能なUIと認証フロー

独自のログイン画面を構築したり、Auth0のホスティングするログインページを利用したりと、認証フローの設計を柔軟に調整できます。

Auth0 Flutterの使い方

Auth0アプリケーションのセットアップ

Auth0の管理ダッシュボードでアカウントを作成し、Flutterアプリ用の新しいアプリケーションを作成します。

作成後に、ドメインとクライアントIDを取得します（後でFlutterコードに使用します）。

pubspec.yamlにAuth0 Flutterを追加

dependencies:
  auth0_flutter: ^0.5.0

ターミナルで以下を実行してパッケージをインストールします。

flutter pub get

Auth0 Flutterを使った認証の実装

取得したドメインとクライアントIDを使用し、認証機能を実装します。

import 'package:auth0_flutter/auth0_flutter.dart';

// Auth0の初期設定
final auth0 = Auth0(
  'YOUR_AUTH0_DOMAIN', 
  'YOUR_AUTH0_CLIENT_ID'
);

ログイン機能の実装

auth0.webAuthentication().login()メソッドを使用してログインを実行します。

Future<void> login() async {
  try {
    final result = await auth0.webAuthentication().login();
    final accessToken = result.accessToken;

    print("Logged in! Access Token: $accessToken");
  } catch (e) {
    print("Login failed: $e");
  }
}

ユーザー情報の取得

ログイン後にgetUserメソッドを使ってユーザーのプロフィール情報を取得します。

Future<void> getUserProfile() async {
  final user = await auth0.users.getUser();
  print("User profile: $user");
}

ログアウトの実装

auth0.webAuthentication().logout()でログアウトできます。

Future<void> logout() async {
  await auth0.webAuthentication().logout();
  print("Logged out");
}

Flutterウィジェットでの実装例

以上の関数をFlutterのウィジェットに組み込み、ボタンでログイン・ログアウトができるシンプルなUIを作成します。

import 'package:flutter/material.dart';
import 'package:auth0_flutter/auth0_flutter.dart';

class AuthExample extends StatelessWidget {
  final auth0 = Auth0('YOUR_AUTH0_DOMAIN', 'YOUR_AUTH0_CLIENT_ID');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Auth0 Flutter Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => login(),
              child: Text("Login"),
            ),
            ElevatedButton(
              onPressed: () => logout(),
              child: Text("Logout"),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> login() async {
    try {
      final result = await auth0.webAuthentication().login();
      print("Logged in with access token: ${result.accessToken}");
    } catch (e) {
      print("Login failed: $e");
    }
  }

  Future<void> logout() async {
    await auth0.webAuthentication().logout();
    print("Logged out");
  }
}