Полный гид по аутентификации третьих сторон в Flutter с Parse на Back4App

введение интеграция сторонних методов аутентификации, таких как facebook, google и apple, в ваше приложение flutter может значительно улучшить пользовательский опыт, предоставляя гибкие и удобные варианты входа parse server, работающий на back4app, предлагает встроенную поддержку этих провайдеров аутентификации в этом руководстве вы узнаете, как реализовать стороннюю аутентификацию в вашем приложении flutter, используя parse sdk на back4app к концу этого руководства у вас будет приложение flutter с полностью функциональными функциями регистрации и входа, которые включают стандартная аутентификация по электронной почте/паролю с использованием parse методы сторонней аутентификации facebook google apple предварительные условия чтобы следовать этому руководству, вам понадобятся следующие аккаунт back4app зарегистрируйтесь для получения бесплатного аккаунта на back4app https //www back4app com установленная среда разработки flutter следуйте этому руководству https //flutter dev/docs/get started/install , если вам нужна помощь с настройкой flutter базовые знания о flutter и dart если вы новичок, ознакомьтесь с введением в flutter https //flutter dev/docs/get started/codelab аккаунты разработчиков для facebook, google и apple (необходимы для настройки методов стороннего входа) ide или текстовый редактор такие как visual studio code или android studio шаг 1 – настройка вашего back4app бэкенда 1 1 создание проекта back4app войдите в ваш дашборд back4app https //dashboard back4app com/ нажмите на "создать новое приложение" введите имя для вашего приложения, например, "authdemo" , и нажмите "создать" после создания проекта перейдите в настройки приложения > безопасность и ключи запишите ваш id приложения и ключ клиента эти значения понадобятся для инициализации parse в вашем приложении flutter 1 2 включение провайдеров аутентификации в вашем дашборде back4app перейдите в настройки сервера > аутентификация включите методы аутентификации, которые вы собираетесь использовать facebook google apple для каждого провайдера вам нужно будет ввести конкретные учетные данные (id приложений, id клиентов, секреты и т д ), которые будут настроены в следующих шагах шаг 2 – установка и настройка parse sdk в flutter 2 1 создать новый проект flutter откройте терминал и создайте новый проект flutter flutter create auth demo cd auth demo 2 2 добавить зависимости откройте pubspec yaml и добавьте следующие зависимости для parse и сторонних вариантов входа 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 инициализировать parse в main dart в файле lib/main dart импортируйте sdk parse и инициализируйте его в функции main 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' на ваши фактические учетные данные back4app из шага 1 шаг 3 – реализация стандартной аутентификации 3 1 создать сервис аутентификации создайте новый каталог с именем services в lib и добавьте файл с именем auth service dart этот сервис будет обрабатывать регистрацию и вход пользователей с использованием parse // 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 этот экран предоставит пользовательский интерфейс для стандартной аутентификации // 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 для разработчиков https //developers facebook com/ и войдите в систему нажмите на "мои приложения" и затем "создать приложение" выберите "потребитель" в качестве типа приложения и нажмите "далее" заполните имя приложения и контактный email , затем нажмите "создать приложение" добавьте вход через facebook в ваше приложение в вашей панели управления приложением перейдите к "добавить продукт" и выберите "вход через facebook" выберите "android" и/или "ios" в зависимости от вашей целевой платформы следуйте шагам настройки, предоставленным facebook вам понадобится ваш идентификатор пакета для ios и имя пакета для android настройте uri перенаправления oauth установите oauth redirect uri на https //parseapi back4app com/auth/facebook/callback получите идентификатор приложения и секрет приложения в вашей панели управления приложением перейдите к "настройки" > "основные" запишите id приложения и секрет приложения добавьте app id и secret в back4app в панели управления back4app перейдите к настройки сервера > аутентификация под facebook , введите ваш id приложения и секрет приложения 4 2 обновить auth service dart с помощью facebook login добавьте следующий код для обработки аутентификации facebook // 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 добавьте следующую кнопку в ваш интерфейс 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 \<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 app id в android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="facebook app id">your facebook app id\</string> \</resources> ios обновите ваш info plist файл \<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 authentication 5 1 настройка учетной записи разработчика google создайте проект в google cloud console перейдите на google cloud console https //console cloud google com/ и создайте новый проект настройте экран согласия oauth перейдите в apis & services > экран согласия oauth настройте экран согласия с необходимыми областями создайте идентификатор клиента oauth перейдите в учетные данные > создать учетные данные > идентификатор клиента oauth выберите веб приложение добавьте авторизованные uri перенаправления https //parseapi back4app com/auth/google/callback запишите идентификатор клиента и секрет клиента добавьте идентификатор клиента и секрет в back4app в панели управления back4app, в разделе настройки сервера > аутентификация , введите ваш идентификатор клиента и секрет клиента для google 5 2 обновите auth service dart с помощью google login добавьте следующий код для обработки аутентификации google // 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 добавьте следующую кнопку в ваш интерфейс 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 файл dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } добавьте ваш google client id в android/app/src/main/res/values/strings xml \<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 \<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 добавьте обратный идентификатор клиента в ваш info plist \<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 зарегистрируйте ваше приложение войдите в портал разработчиков apple https //developer apple com/ и зарегистрируйте ваше приложение включите вход с помощью apple в разделе идентификаторы , выберите ваше приложение и включите вход с помощью apple создайте идентификатор служб создайте идентификатор служб для вашего приложения установите uri перенаправления на https //parseapi back4app com/auth/apple/callback сгенерируйте секрет клиента создайте секрет клиента используйте этот ключ для генерации секрета клиента добавьте учетные данные в back4app в панели управления back4app, в разделе настройки сервера > аутентификация , введите ваш идентификатор служб и секрет клиента для apple 6 2 обновите auth service dart с помощью входа через apple добавьте следующий код для обработки аутентификации apple // 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 добавьте следующую кнопку в ваш интерфейс 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 шаг 7 – тестирование вашего приложения теперь, когда вы настроили все методы аутентификации, вы можете запустить ваше приложение и протестировать каждый вариант входа 7 1 запустите приложение flutter run для ios вы должны запустить приложение на реальном устройстве, чтобы протестировать вход с apple для android вы можете использовать эмулятор или физическое устройство 7 2 тестирование стандартной аутентификации введите имя пользователя, адрес электронной почты и пароль нажмите "sign up" для создания нового пользователя нажмите "login" для входа с созданными учетными данными 7 3 тестирование входа через facebook нажмите "войти с facebook" появится экран входа в facebook войдите с помощью своих учетных данных facebook 7 4 тест входа через google нажмите "войти с google" появится экран входа в google войдите с помощью своей учетной записи google 7 5 тест входа через apple (только для ios) нажмите "войти с apple" появится запрос на вход в apple аутентифицируйтесь с помощью своего apple id заключение в этом руководстве вы успешно реализовали стандартную аутентификацию по электронной почте/паролю и интегрировали сторонние методы аутентификации (facebook, google и apple) в ваше приложение flutter с использованием parse sdk на back4app эта настройка улучшает пользовательский опыт, предлагая несколько удобных вариантов входа следующие шаги профили пользователей расширьте приложение для управления профилями пользователей, позволяя им обновлять свою информацию функция выхода реализуйте функции выхода для каждого метода аутентификации безопасность данных обеспечьте безопасность ваших данных, реализовав контроль доступа на основе ролей с помощью parse acl и ролей обработка ошибок улучшите обработку ошибок, чтобы предоставить пользователям более подробную обратную связь улучшения интерфейса настройте интерфейс, чтобы он соответствовал брендингу вашего приложения и улучшал пользовательский опыт дополнительные ресурсы документация back4app https //www back4app com/docs руководство по parse flutter sdk https //docs parseplatform org/flutter/guide/ официальная документация flutter https //flutter dev/docs facebook для разработчиков https //developers facebook com/ платформа идентификации google https //developers google com/identity документация по входу с apple https //developer apple com/sign in with apple/ счастливого кодирования!