もっと
Back4AppのParseを使用したFlutterのサードパーティ認証に関する完全ガイド

42min
はじめに
Facebook、Google、Appleなどのサードパーティ認証方法をFlutterアプリに統合することで、柔軟で便利なログインオプションを提供し、ユーザーエクスペリエンスを大幅に向上させることができます。Back4Appが提供するParse Serverは、これらの認証プロバイダーに対する組み込みサポートを提供しています。このチュートリアルでは、Back4AppのParse SDKを使用してFlutterアプリにサードパーティ認証を実装する方法を学びます。
このチュートリアルの終わりまでに、以下の機能を備えた完全に機能するサインアップおよびログイン機能を持つFlutterアプリを作成することができます:
Parseを使用した標準のメール/パスワード認証。
サードパーティ認証方法:
Facebook
Google
Apple
前提条件
このチュートリアルに従うには、以下が必要です:
Back4Appアカウントを作成してください。Back4Appで無料アカウントにサインアップします。
Flutter開発環境がマシンにインストールされていること。このガイドを参照してFlutterのセットアップに関するヘルプを受けてください。
FlutterとDartの基本的な知識が必要です。もし新しい場合は、Flutterの紹介を確認してください。
Facebook、Google、Appleの開発者アカウント（サードパーティログイン方法を設定するために必要）。
Visual Studio CodeやAndroid StudioなどのIDEまたはテキストエディタ。
ステップ 1 – Back4App バックエンドの設定
1.1. Back4App プロジェクトの作成
あなたの Back4App ダッシュボード にログインします。
"新しいアプリを作成" をクリックします。
アプリケーションの名前を入力します。例: "AuthDemo", そして "作成" をクリックします。
プロジェクトが作成されたら、次に進みます。 アプリ設定 > セキュリティとキー に移動します。
あなたの アプリケーション ID と クライアントキー をメモしておいてください。これらの値は、Flutter アプリで Parse を初期化するために必要です。
1.2. 認証プロバイダーの有効化
Back4App ダッシュボードで、次に進みます。 サーバー設定 > 認証 に移動します。
使用する認証方法を有効にします:
Facebook
Google
Apple
各プロバイダーについて、特定の資格情報（アプリ ID、クライアント ID、シークレットなど）を入力する必要があります。これらは今後のステップで設定されます。
ステップ 2 – Flutter における Parse SDK のインストールと設定
2.1. 新しいFlutterプロジェクトを作成する
ターミナルを開いて、新しいFlutterプロジェクトを作成します:
Bash
flutter create auth_demo
cd auth_demo
flutter create auth_demo
cd auth_demo
﻿
2.2. 依存関係を追加する
 pubspec.yaml を開いて、Parseおよびサードパーティのサインインオプションのための以下の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
﻿
依存関係をインストールするために、flutter pub getを実行します。
2.3. main.dartでParseを初期化する
 lib/main.dartファイルで、Parse SDKをインポートし、main関数内で初期化します:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
﻿
 'YOUR_APP_ID' と 'YOUR_CLIENT_KEY' を、ステップ1からの実際のBack4Appの資格情報に置き換えます。
ステップ3 – 標準認証の実装
3.1. 認証サービスを作成する
新しいディレクトリを作成します。servicesをlibの下に作成し、auth_service.dartという名前のファイルを追加します。このサービスは、Parseを使用してユーザー登録とログインを処理します。
Dart
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
﻿
3.2. 認証画面を作成する
新しいディレクトリを作成します。screensをlibの下に作成し、auth_screen.dartという名前のファイルを追加します。この画面は、標準的な認証のためのUIを提供します。
Dart
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
﻿
ステップ 4 – Facebook 認証の統合
4.1. Facebook 開発者アカウントの設定
Facebookアプリを作成する：
行く Facebook for Developers にログインします。
クリックして "マイアプリ" を選択し、次に "アプリを作成" をクリックします。
選択する "コンシューマー" をアプリタイプとして選択し、クリックします "次へ".
「アプリ名」と連絡先メールを入力し、次に「アプリを作成」をクリックします。
アプリにFacebookログインを追加する：
アプリのダッシュボードで、"製品を追加"に移動し、"Facebookログイン"を選択します。
選択する "Android" および/または "iOS" あなたのターゲットプラットフォームに応じて。
Facebookが提供するセットアップ手順に従ってください。アプリの バンドル識別子 がiOS用と パッケージ名 がAndroid用に必要です。
OAuthリダイレクトURIを設定する：
「OAuthリダイレクトURI」を次のように設定します: https://parseapi.back4app.com/auth/facebook/callback
アプリIDとアプリシークレットを取得する：
アプリのダッシュボードで、次に進んでください "設定" > "基本".
「アプリID」と「アプリシークレット」をメモしてください。
Back4AppにアプリIDとシークレットを追加する：
Back4Appダッシュボードで、次に進みます サーバー設定 > 認証.
「Facebook」の下に、あなたの App ID と App Secret を入力してください。
4.2. 更新 auth_service.dart Facebookログインを使用して
Facebook認証を処理するために、次のコードを追加してください:
Dart
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
﻿
4.3. Facebookログインボタンを追加する auth_screen.dart
次のボタンをUIに追加します:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
﻿
4.4. プラットフォーム固有の設定
Android
あなたの android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
﻿
あなたのFacebookアプリIDを android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
﻿
iOS
あなたの Info.plist ファイルを更新してください:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
﻿
ステップ5 – Google認証の統合
5.1. Google開発者アカウントの設定
Google Cloud Consoleでプロジェクトを作成する：
に移動します Google Cloud Console そして新しいプロジェクトを作成します。
OAuth同意画面を設定する：
に移動します APIs & Services > OAuth同意画面.
必要なスコープで同意画面を設定します。
OAuthクライアントIDを作成する：
に移動します Credentials > Credentialsを作成 > OAuthクライアントID.
を選択します Webアプリケーション.
を追加します 承認済みリダイレクトURI: https://parseapi.back4app.com/auth/google/callback
をメモします クライアントID と クライアントシークレット.
クライアントIDとシークレットをBack4Appに追加する：
Back4Appダッシュボードで、 サーバー設定 > 認証, に入力します クライアントID と クライアントシークレット をGoogle用に。
5.2. auth_service.dart をGoogleログインで更新する
Google 認証を処理するために次のコードを追加してください:
Dart
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
5.3. Googleログインボタンを追加する auth_screen.dart
次のボタンをUIに追加します:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
﻿
5.4. プラットフォーム固有の設定
Android
次の内容を android/app/build.gradle ファイルに追加してください:
Text
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
﻿
あなたのGoogleクライアントIDを android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
﻿
あなたの android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
﻿
iOS
逆クライアントIDをあなたの Info.plist:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
﻿
ステップ 6 – Apple 認証の統合
6.1. Apple Developer アカウントの設定
アプリを登録する:
にサインイン Apple Developer Portalし、アプリを登録します。
Appleでのサインインを有効にする:
の下で 識別子, アプリを選択し、 Appleでのサインインを有効にします。
サービスIDを作成する:
アプリのために サービスIDを作成します。
を設定します リダイレクトURI を: https://parseapi.back4app.com/auth/apple/callback
クライアントシークレットを生成する:
を作成します Appleでのサインイン プライベートキー。
このキーを使用して クライアントシークレットを生成します。
Back4Appに資格情報を追加する:
Back4Appダッシュボードで、 サーバー設定 > 認証, あなたの サービスID と クライアントシークレットを入力します。
6.2. auth_service.dart をAppleログインで更新する
Apple認証を処理するために次のコードを追加します:
Dart
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
6.3. Appleログインボタンを auth_screen.dart
次のボタンをUIに追加します:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
﻿
6.4. プラットフォーム固有の設定
iOSのみ
Xcodeでプロジェクトを開き、 Signing & Capabilities に移動します。
"+ Capability"をクリックして、 "Sign in with Apple" を追加します。
あなたの Bundle Identifier がApple Developer Portalに登録されているものと一致していることを確認してください。
ステップ7 – アプリケーションのテスト
すべての認証方法を設定したので、アプリを実行して各ログインオプションをテストできます。
7.1. アプリを実行する
Bash
flutter run
flutter run
﻿
iOSの場合、Appleでのサインインをテストするには、実際のデバイスでアプリを実行する必要があります。
Androidの場合、エミュレーターまたは物理デバイスを使用できます。
7.2. 標準認証のテスト
ユーザー名、メールアドレス、パスワードを入力します。
新しいユーザーを作成するには、"サインアップ"をタップします。
作成した資格情報でログインするには、"ログイン"をタップします。
7.3. Facebookログインのテスト
タップ "Facebookでログイン".
Facebookのログイン画面が表示されます。
Facebookの認証情報でログインします。
7.4. Googleログインのテスト
タップ "Googleでログイン".
Googleのサインイン画面が表示されます。
Googleアカウントでログインします。
7.5. Appleログインのテスト（iOSのみ）
タップ "Appleでログイン".
Appleのサインインプロンプトが表示されます。
Apple IDを使用して認証します。
結論
このチュートリアルでは、標準のメール/パスワード認証を成功裏に実装し、Parse SDKを使用してBack4AppにFlutterアプリにサードパーティの認証方法（Facebook、Google、Apple）を統合しました。この設定は、複数の便利なログインオプションを提供することでユーザーエクスペリエンスを向上させます。
次のステップ
ユーザープロファイル： アプリを拡張してユーザープロファイルを管理し、ユーザーが情報を更新できるようにします。
ログアウト機能： 各認証方法のためのログアウト機能を実装します。
データセキュリティ： Parse ACLとロールを使用して、ロールベースのアクセス制御を実装することでデータを保護します。
エラーハンドリング： ユーザーにより詳細なフィードバックを提供するためにエラーハンドリングを改善します。
UIの強化： アプリのブランディングに合わせてUIをカスタマイズし、ユーザーエクスペリエンスを向上させます。
追加リソース
﻿Back4App ドキュメント﻿
﻿Parse Flutter SDK ガイド﻿
﻿Flutter 公式ドキュメント﻿
﻿Facebook for Developers﻿
﻿Google Identity Platform﻿
﻿Appleでのサインイン ドキュメント﻿
コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
Flutterでfl_chartとBack4Appを使ってデータを可視化する方法
FlutterでHomeWidgetとBack4Appを使用してホーム画面ウィジェットを作成する方法