Flutter中使用Back4App的Parse进行第三方身份验证的完整指南

介绍 将第三方认证方法如 facebook、google 和 apple 集成到您的 flutter 应用中，可以通过提供灵活和便捷的登录选项显著提升用户体验。parse server，由 back4app 提供支持，内置对这些认证提供者的支持。在本教程中，您将学习如何使用 back4app 上的 parse sdk 在您的 flutter 应用中实现第三方认证。 在本教程结束时，您将拥有一个具有完全功能的注册和登录功能的 flutter 应用，包括： 使用 parse 的标准电子邮件/密码认证。 第三方认证方法： facebook google apple 前提条件 要跟随本教程，您需要以下内容： 一个 back4app 账户 。在 back4app https //www back4app com 注册一个免费账户。 一个 flutter 开发环境 安装在您的机器上。如果您需要帮助设置 flutter，请遵循 本指南 https //flutter dev/docs/get started/install 。 基本的 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 和 客户端密钥 您需要这些值来初始化 flutter 应用中的 parse 1 2 启用身份验证提供者 在您的 back4app 控制面板中，导航到 服务器设置 > 身份验证 启用您打算使用的身份验证方法： facebook google apple 对于每个提供者，您需要输入特定的凭据（应用 id、客户端 id、密钥等），这些将在接下来的步骤中设置 步骤 2 – 在 flutter 中安装和设置 parse sdk 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 在 main dart 中初始化 parse 在 lib/main dart 文件中，导入 parse sdk 并在 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(), ); } } 用你的实际 back4app 凭据替换 'your app id' 和 'your client key' ，来自步骤 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/ 并登录。 点击 "我的应用" 然后 "创建应用" 选择 "消费者" 作为应用类型，然后点击 "下一步" 。 填写 应用名称 和 联系邮箱 , 然后点击 "创建应用" 将 facebook 登录添加到您的应用程序： 在您的应用仪表板中，导航到 "添加产品" 并选择 "facebook 登录" 选择 "android" 和/或 "ios" 取决于您的目标平台。 按照 facebook 提供的设置步骤进行操作。您将需要您的应用的 bundle identifier 用于 ios 和 package name 用于 android。 配置 oauth 重定向 uri： 设置 oauth 重定向 uri 为 https //parseapi back4app com/auth/facebook/callback 获取应用 id 和应用密钥： 在您的应用仪表板中，转到 "设置" > "基本" 记下 应用程序 id 和 应用程序密钥 将应用 id 和密钥添加到 back4app： 在 back4app 控制面板中，导航到 服务器设置 > 身份验证 在 facebook , 输入你的 应用 id 和 应用密钥 4 2 更新 auth service dart 以支持 facebook 登录 添加以下代码以处理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/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 应用 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 认证 5 1 设置 google 开发者账户 在 google cloud 控制台中创建项目： 访问 google cloud 控制台 https //console cloud google com/ 并创建一个新项目。 配置 oauth 同意屏幕： 导航到 api 和服务 > oauth 同意屏幕 使用必要的范围设置同意屏幕。 创建 oauth 客户端 id： 访问 凭据 > 创建凭据 > oauth 客户端 id 选择 web 应用程序 添加 授权重定向 uri https //parseapi back4app com/auth/google/callback 记下 客户端 id 和 客户端密钥 将客户端 id 和密钥添加到 back4app： 在 back4app 仪表板中，进入 服务器设置 > 身份验证 , 输入您的 客户端 id 和 客户端密钥 用于 google。 5 2 更新 auth service dart 以实现 google 登录 添加以下代码以处理 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/app/build gradle 文件中 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 \<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 将反向客户端 id 添加到你的 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 登录 创建服务 id： 为您的应用程序创建一个 服务 id 将 重定向 uri 设置为： https //parseapi back4app com/auth/apple/callback 生成客户端密钥： 创建一个 apple 登录 私钥。 使用此密钥生成一个 客户端密钥 将凭据添加到 back4app： 在 back4app 仪表板中，选择 服务器设置 > 身份验证 , 输入您的 服务 id 和 客户端密钥 以用于 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中，打开您的项目并转到 签名与能力 点击 "+ 能力" 并添加 "使用苹果登录" 确保您的 包标识符 与在苹果开发者门户上注册的标识符匹配。 第7步 – 测试您的应用程序 现在您已经设置了所有身份验证方法，可以运行您的应用程序并测试每个登录选项。 7 1 运行应用程序 flutter run 对于ios，您必须在真实设备上运行应用程序以测试使用苹果登录。 对于android，您可以使用模拟器或物理设备。 7 2 测试标准身份验证 输入用户名、电子邮件和密码。 点击 "注册" 创建新用户。 点击 "登录" 使用创建的凭据登录。 7 3 测试facebook登录 点击 "使用 facebook 登录" 将出现 facebook 登录界面。 使用您的 facebook 凭据登录。 7 4 测试 google 登录 点击 "使用 google 登录" 将出现 google 登录界面。 使用您的 google 账户登录。 7 5 测试 apple 登录（仅限 ios） 点击 "使用 apple 登录" 将出现 apple 登录提示。 使用您的 apple id 进行身份验证。 结论 在本教程中，您成功实现了标准的电子邮件/密码身份验证，并使用 back4app 上的 parse sdk 将第三方身份验证方法（facebook、google 和 apple）集成到您的 flutter 应用中。此设置通过提供多种便捷的登录选项来增强用户体验。 后续步骤 用户资料： 扩展应用以管理用户资料，允许用户更新其信息。 注销功能： 为每种身份验证方法实现注销功能。 数据安全： 通过实施基于角色的访问控制（parse acls 和 roles）来保护您的数据。 错误处理： 改进错误处理，以向用户提供更详细的反馈。 用户界面增强： 自定义用户界面以匹配您的应用品牌并改善用户体验。 其他资源 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/ 祝您编码愉快！