Техническое руководство: Вход с Apple для Flutter в Parse

10min
Вход в Flutter с помощью Apple на Parse
Введение
Parse Server поддерживает аутентификацию третьих сторон.
В этом руководстве вы узнаете, как поддерживать вход с помощью Apple в вашем приложении Flutter на Parse.
Предварительные требования
Чтобы завершить этот учебник, вам потребуется:
﻿Версия Flutter 2.2.x или новее﻿
﻿Android Studio или установленный VS Code (с плагинами Dart и Flutter)
Приложение Flutter, созданное и подключенное к Back4App.
Примечание: Следуйте за Учебник по созданию нового Parse App чтобы узнать, как создать Parse App на Back4App.
Платное членство в Программе разработчиков Apple.
Настройте плагин sign_in_with_apple в проекте.
Устройство (не эмулятор) с iOS.
Цель
Войти с помощью Apple в приложении Flutter на Parse Server
- Добавьте возможность входа с помощью Apple в ваш проект на iOS
Откройтеios/Runner.xcworkspace в Xcode
Проверьте плагинsign_in_with_apple инструкции по настройке Вход с помощью Apple в вашем проекте на iOS
ВыберитеКоманду для проекта.
Сохраните и закройте Xcode
- Настройка идентификатора приложения в портале разработчиков
Войдите в свой учетную запись разработчика Apple и перейдите в раздел Идентификаторы.
Проверьте, есть ли ваш созданный Идентификатор пакета.
﻿
Нажмите на Идентификатор пакета, прокрутите вниз. Проверьте, выбран ли Вход с помощью Apple.
﻿
Нажмите Редактировать, и убедитесь, что выбран Включить как основной идентификатор приложения.
﻿
Если все верно, сохраните и выйдите.
- Настройка Parse Auth для Apple
Перейдите на сайт Back4App, войдите в систему и найдите свое приложение. После этого нажмите на Настройки сервера и найдите блок Вход с Apple и выберите Настройки.
Раздел Вход с Apple выглядит так:
﻿
Теперь вам просто нужно вставить ваш Bundle ID в поле ниже и нажать кнопку для сохранения.
﻿
Если у вас возникнут какие-либо проблемы при интеграции Входа с Apple, пожалуйста, свяжитесь с нашей командой через чат!
- Добавьте Вход с Apple
Теперь, когда у вас настроен проект, мы можем получить данные пользователя и войти в Parse.
Согласно документации, мы должны отправить карту с данными аутентификации пользователя.
Swift
       final credential = await SignInWithApple.getAppleIDCredential(
         scopes: [
           AppleIDAuthorizationScopes.email,
           AppleIDAuthorizationScopes.fullName,
         ],
       );

       //https://docs.parseplatform.org/parse-server/guide/#apple-authdata
       //According to the documentation, we must send a Map with user authentication data.
      //Make sign in with Apple
      final parseResponse = await ParseUser.loginWith('apple',
          apple(credential.identityToken!, credential.userIdentifier!));
       final credential = await SignInWithApple.getAppleIDCredential(
         scopes: [
           AppleIDAuthorizationScopes.email,
           AppleIDAuthorizationScopes.fullName,
         ],
       );

       //https://docs.parseplatform.org/parse-server/guide/#apple-authdata
       //According to the documentation, we must send a Map with user authentication data.
      //Make sign in with Apple
      final parseResponse = await ParseUser.loginWith('apple',
          apple(credential.identityToken!, credential.userIdentifier!));
﻿
- Вход с Apple из Flutter
Теперь давайте используем наш пример для входа с помощью Apple в приложении Flutter с простым интерфейсом.
Откройте ваш проект Flutter, перейдите в файл main.dart, очистите весь код и замените его на:
Dart
 import 'package:flutter/material.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
 import 'package:sign_in_with_apple/sign_in_with_apple.dart';
4
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
7
   final keyApplicationId = 'YOUR_APP_ID_HERE';
   final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';
11
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
14
  runApp(MyApp());
}
17
class MyApp extends StatelessWidget {
  Future<bool> hasUserLogged() async {
    ParseUser? currentUser = await ParseUser.currentUser() as ParseUser?;
    if (currentUser == null) {
      return false;
    }
    //Checks whether the user's session token is valid
    final ParseResponse? parseResponse =
        await ParseUser.getCurrentUserFromServer(currentUser.sessionToken!);

    if (parseResponse?.success == null || !parseResponse!.success) {
      //Invalid session. Logout
      await currentUser.logout();
      return false;
    } else {
      return true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter - Sign In with Apple',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FutureBuilder<bool>(
          future: hasUserLogged(),
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return Scaffold(
                  body: Center(
                    child: Container(
                        width: 100,
                        height: 100,
                        child: CircularProgressIndicator()),
                  ),
                );
              default:
                if (snapshot.hasData && snapshot.data!) {
                  return UserPage();
                } else {
                  return HomePage();
                }
            }
          }),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
75
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter - Sign In with Apple'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  height: 200,
                  child: Image.network(
                      'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
                ),
                Center(
                  child: const Text('Flutter on Back4App',
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ),
                SizedBox(
                 height: 100,
               ),
               Container(
                 height: 50,
                 child: ElevatedButton(
                   child: const Text('Sign In with Apple'),
                   onPressed: () => doSignInApple(),
                 ),
               ),
               SizedBox(
                 height: 16,
               ),
             ],
           ),
         ),
       ));
 }

 void doSignInApple() async {
   late ParseResponse parseResponse;
   try {
     //Set Scope
     final credential = await SignInWithApple.getAppleIDCredential(
       scopes: [
         AppleIDAuthorizationScopes.email,
         AppleIDAuthorizationScopes.fullName,
       ],
     );
128
     //https://docs.parseplatform.org/parse-server/guide/#apple-authdata
     //According to the documentation, we must send a Map with user authentication data.
     //Make sign in with Apple
     parseResponse = await ParseUser.loginWith('apple',
         apple(credential.identityToken!, credential.userIdentifier!));

     if (parseResponse.success) {
       final ParseUser parseUser = await ParseUser.currentUser() as ParseUser;

       //Additional Information in User
       if (credential.email != null) {
         parseUser.emailAddress = credential.email;
       }
       if (credential.givenName != null && credential.familyName != null) {
         parseUser.set<String>(
             'name', '${credential.givenName} ${credential.familyName}');
       }
       parseResponse = await parseUser.save();
       if (parseResponse.success) {
         Message.showSuccess(
             context: context,
             message: 'User was successfully with Sign In Apple!',
             onPressed: () async {
               Navigator.pushAndRemoveUntil(
                 context,
                 MaterialPageRoute(builder: (context) => UserPage()),
                 (Route<dynamic> route) => false,
               );
             });
       } else {
         Message.showError(
             context: context, message: parseResponse.error!.message);
       }
     } else {
       Message.showError(
           context: context, message: parseResponse.error!.message);
     }
   } on Exception catch (e) {
     print(e.toString());
     Message.showError(context: context, message: e.toString());
   }
 }
}
172
class UserPage extends StatelessWidget {
 Future<ParseUser?> getUser() async {
   return await ParseUser.currentUser() as ParseUser?;
 }
177
 @override
 Widget build(BuildContext context) {
   void doUserLogout() async {
     final currentUser = await ParseUser.currentUser() as ParseUser;
     var response = await currentUser.logout();
     if (response.success) {
       Message.showSuccess(
           context: context,
           message: 'User was successfully logout!',
           onPressed: () {
             Navigator.pushAndRemoveUntil(
               context,
               MaterialPageRoute(builder: (context) => HomePage()),
               (Route<dynamic> route) => false,
             );
           });
     } else {
       Message.showError(context: context, message: response.error!.message);
     }
   }

   return Scaffold(
       appBar: AppBar(
         title: Text('Flutter - Sign In with Apple'),
       ),
       body: FutureBuilder<ParseUser?>(
           future: getUser(),
           builder: (context, snapshot) {
             switch (snapshot.connectionState) {
               case ConnectionState.none:
               case ConnectionState.waiting:
                 return Center(
                   child: Container(
                       width: 100,
                       height: 100,
                       child: CircularProgressIndicator()),
                 );
               default:
                 return Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       Center(
                           child: Text(
                               'Hello, ${snapshot.data!.get<String>('name')}')),
                       SizedBox(
                         height: 16,
                       ),
                       Container(
                         height: 50,
                         child: ElevatedButton(
                           child: const Text('Logout'),
                           onPressed: () => doUserLogout(),
                         ),
                       ),
                     ],
                   ),
                 );
             }
           }));
 }
}

class Message {
 static void showSuccess(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Success!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }

 static void showError(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Error!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }
}
 import 'package:flutter/material.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
 import 'package:sign_in_with_apple/sign_in_with_apple.dart';
4
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
7
   final keyApplicationId = 'YOUR_APP_ID_HERE';
   final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';
11
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
14
  runApp(MyApp());
}
17
class MyApp extends StatelessWidget {
  Future<bool> hasUserLogged() async {
    ParseUser? currentUser = await ParseUser.currentUser() as ParseUser?;
    if (currentUser == null) {
      return false;
    }
    //Checks whether the user's session token is valid
    final ParseResponse? parseResponse =
        await ParseUser.getCurrentUserFromServer(currentUser.sessionToken!);

    if (parseResponse?.success == null || !parseResponse!.success) {
      //Invalid session. Logout
      await currentUser.logout();
      return false;
    } else {
      return true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter - Sign In with Apple',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FutureBuilder<bool>(
          future: hasUserLogged(),
          builder: (context, snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return Scaffold(
                  body: Center(
                    child: Container(
                        width: 100,
                        height: 100,
                        child: CircularProgressIndicator()),
                  ),
                );
              default:
                if (snapshot.hasData && snapshot.data!) {
                  return UserPage();
                } else {
                  return HomePage();
                }
            }
          }),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
75
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter - Sign In with Apple'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  height: 200,
                  child: Image.network(
                      'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
                ),
                Center(
                  child: const Text('Flutter on Back4App',
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ),
                SizedBox(
                 height: 100,
               ),
               Container(
                 height: 50,
                 child: ElevatedButton(
                   child: const Text('Sign In with Apple'),
                   onPressed: () => doSignInApple(),
                 ),
               ),
               SizedBox(
                 height: 16,
               ),
             ],
           ),
         ),
       ));
 }

 void doSignInApple() async {
   late ParseResponse parseResponse;
   try {
     //Set Scope
     final credential = await SignInWithApple.getAppleIDCredential(
       scopes: [
         AppleIDAuthorizationScopes.email,
         AppleIDAuthorizationScopes.fullName,
       ],
     );
128
     //https://docs.parseplatform.org/parse-server/guide/#apple-authdata
     //According to the documentation, we must send a Map with user authentication data.
     //Make sign in with Apple
     parseResponse = await ParseUser.loginWith('apple',
         apple(credential.identityToken!, credential.userIdentifier!));

     if (parseResponse.success) {
       final ParseUser parseUser = await ParseUser.currentUser() as ParseUser;

       //Additional Information in User
       if (credential.email != null) {
         parseUser.emailAddress = credential.email;
       }
       if (credential.givenName != null && credential.familyName != null) {
         parseUser.set<String>(
             'name', '${credential.givenName} ${credential.familyName}');
       }
       parseResponse = await parseUser.save();
       if (parseResponse.success) {
         Message.showSuccess(
             context: context,
             message: 'User was successfully with Sign In Apple!',
             onPressed: () async {
               Navigator.pushAndRemoveUntil(
                 context,
                 MaterialPageRoute(builder: (context) => UserPage()),
                 (Route<dynamic> route) => false,
               );
             });
       } else {
         Message.showError(
             context: context, message: parseResponse.error!.message);
       }
     } else {
       Message.showError(
           context: context, message: parseResponse.error!.message);
     }
   } on Exception catch (e) {
     print(e.toString());
     Message.showError(context: context, message: e.toString());
   }
 }
}
172
class UserPage extends StatelessWidget {
 Future<ParseUser?> getUser() async {
   return await ParseUser.currentUser() as ParseUser?;
 }
177
 @override
 Widget build(BuildContext context) {
   void doUserLogout() async {
     final currentUser = await ParseUser.currentUser() as ParseUser;
     var response = await currentUser.logout();
     if (response.success) {
       Message.showSuccess(
           context: context,
           message: 'User was successfully logout!',
           onPressed: () {
             Navigator.pushAndRemoveUntil(
               context,
               MaterialPageRoute(builder: (context) => HomePage()),
               (Route<dynamic> route) => false,
             );
           });
     } else {
       Message.showError(context: context, message: response.error!.message);
     }
   }

   return Scaffold(
       appBar: AppBar(
         title: Text('Flutter - Sign In with Apple'),
       ),
       body: FutureBuilder<ParseUser?>(
           future: getUser(),
           builder: (context, snapshot) {
             switch (snapshot.connectionState) {
               case ConnectionState.none:
               case ConnectionState.waiting:
                 return Center(
                   child: Container(
                       width: 100,
                       height: 100,
                       child: CircularProgressIndicator()),
                 );
               default:
                 return Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       Center(
                           child: Text(
                               'Hello, ${snapshot.data!.get<String>('name')}')),
                       SizedBox(
                         height: 16,
                       ),
                       Container(
                         height: 50,
                         child: ElevatedButton(
                           child: const Text('Logout'),
                           onPressed: () => doUserLogout(),
                         ),
                       ),
                     ],
                   ),
                 );
             }
           }));
 }
}

class Message {
 static void showSuccess(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Success!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }

 static void showError(
     {required BuildContext context,
     required String message,
     VoidCallback? onPressed}) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Error!"),
         content: Text(message),
         actions: <Widget>[
           new ElevatedButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
               if (onPressed != null) {
                 onPressed();
               }
             },
           ),
         ],
       );
     },
   );
 }
}
﻿
Найдите свой идентификатор приложения и учетные данные клиентского ключа, перейдя на панель управления вашего приложения по адресу Сайт Back4App.
Обновите свой код в main.dart с значениями идентификатора приложения и клиентского ключа вашего проекта в Back4app.
keyApplicationId = Идентификатор приложения﻿
keyClientKey = Ключ клиента﻿
Запустите проект, и приложение загрузится, как показано на изображении.
﻿
Заключение
На этом этапе вы можете использовать Вход с Apple в Flutter на Back4app.