【Flutter】sign_in_with_appleでApple IDでサインイン

sign_in_with_appleとは
使い方

sign_in_with_appleとは

sign_in_with_appleは、Apple IDを使用してサインインする機能をFlutterアプリに統合するためのパッケージです。
Apple IDによるログインと、ユーザーのキーチェーンに保存された資格情報の取得をサポートします。

sign_in_with_apple | Flutter package

Flutter bridge to initiate Sign in with Apple (on iOS, macOS, and Android). Includes support for keychain entries as wel...

使い方

sign_in_with_appleのインストール

まず、pubspec.yamlファイルにsign_in_with_appleを追加します。

dependencies:
  sign_in_with_apple: ^6.1.0

基本的な使用方法

SignInWithAppleButtonの追加

SignInWithAppleButtonウィジェットを使用して、Apple IDでのサインインボタンを追加します。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sign in with Apple Example'),
        ),
        body: Center(
          child: SignInWithAppleButton(
            onPressed: () async {
              final credential = await SignInWithApple.getAppleIDCredential(
                scopes: [
                  AppleIDAuthorizationScopes.email,
                  AppleIDAuthorizationScopes.fullName,
                ],
              );

              print(credential);

              // 取得したcredentialをサーバーに送信して、Appleで検証し、新しいセッションを作成します
            },
          ),
        ),
      ),
    );
  }
}

サーバーとの統合

Apple IDでのサインインを完全に統合するためには、受け取った資格情報をAppleのサーバーで検証し、それに基づいて新しいセッションを作成する必要があります。さらに、取得したリフレッシュトークンを使用して定期的にセッションを検証し、Apple側で認証が取り消された場合はセッションを無効にする必要があります。

前提条件

Appleの開発者プログラムに有料で参加している必要があります。Apple IDでのサインインは、無料のApple IDでは利用できません。

設定

App IDの登録

Apple Developerアカウントで新しいApp IDを作成し、Apple IDでのサインイン機能を有効にします。

Service IDの作成 (WebおよびAndroidのみ)

WebやAndroidでサインイン機能を使用する場合は、Service IDを作成し、ドメインとリターンURLを設定します。

認証キーの作成

Appleのサーバーと通信するための認証キーを作成し、キーIDをメモします。

プラットフォーム別設定

iOS

XcodeでSign in with Apple機能をアプリのCapabilitiesに追加します。
必要に応じてプロビジョニングプロファイルを更新します。

Android

AndroidManifest.xmlに以下の設定を追加します。

<activity
    android:name="com.aboutyou.dart_packages.sign_in_with_apple.SignInWithAppleCallback"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="signinwithapple"/>
        <data android:path="callback"/>
    </intent-filter>
</activity>

Chrome Custom Tabを使用してサインインページからアプリに戻るために、launchModeをsingleTaskまたはsingleTopに設定します。

Web

index.htmlの<head>タグに以下のスクリプトを追加します。

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

Apple Developerポータルで設定したドメインとリターンURLを追加します。

パラメータの説明

scopes: サインイン時に要求する情報の範囲。AppleIDAuthorizationScopes.emailやAppleIDAuthorizationScopes.fullNameなどを指定します。
credential.authorizationCode: サーバー側でAppleの認証を検証するために使用するコード。

例

以下に、Apple IDでのサインインを実装した例を示します。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sign in with Apple Example'),
        ),
        body: Center(
          child: SignInWithAppleButton(
            onPressed: () async {
              final credential = await SignInWithApple.getAppleIDCredential(
                scopes: [
                  AppleIDAuthorizationScopes.email,
                  AppleIDAuthorizationScopes.fullName,
                ],
              );

              print(credential);
            },
          ),
        ),
      ),
    );
  }
}