[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fCd94QL6ZF4Cm5SKbm4NRqIYfBAHttSRn06wW3DQ5fRY":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},135,"2024-11-09T09:53:38.596Z","flutter中如何实现Apple登录","## 一、现有的Apple登录第三方库\n众所周知，当你想要快速实现某一个功能的时候，最快的方法还是要看一下有没有便捷的第三方库，可以极大的提高效率，而flutter第三方库查找的地方就在：[https://pub.dev/](https://pub.dev/)，这个是flutter官方支持库网址。\n\n目前来说，flutter的生态已经非常完善，而且支持的平台也很多，所以大多数项目所需的功能，都是可以找到现成的库来解决的。\n\n对于苹果的授权登录，最流行的库当属：`sign_in_with_apple`，连接是：[https://pub.dev/packages/sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple)，这个库是aboutyou团队开发和维护的库。\n\n## 二、集成Apple login\n1. 在flutter的pubspec.yaml中手动引入，或者通过命令引入：\n- 手动引入：\n```pubspec.yaml\nsign_in_with_apple: ^6.1.0\n```\n![flutter apple登录](https://image.xinwei.ltd/image1731144292470.png)\n- 终端命令集成\n```terminal\nflutter pub add sign_in_with_apple    \n```\n\n2. 自定义你的登录按钮，点击事件中添加以下代码：\n```dart\nimport 'package:sign_in_with_apple/sign_in_with_apple.dart';\n\nclass LoginPage extends StatefulWidget {\n  const LoginPage({super.key});\n\n  @override\n  State\u003CLoginPage> createState() => _LoginPageState();\n}\n\nclass _LoginPageState extends State\u003CLoginPage> {\n  ...\n\n  /// Apple 登录，解析这个credential\n  void login(AuthorizationCredentialAppleID appleID) async {\n    BaseViewModel.showLoadingDialog();\n    DefaultRepository repository = DefaultRepository();\n    var result = await repository.loginApple(\n        appleID.authorizationCode, appleID.identityToken ?? \"\", appleID.userIdentifier ?? \"\");\n    await BaseViewModel.hideLoadingDialog();\n    if (result.isSucc) {\n      handleLoginResult(result);\n    }\n  }\n\n  ...\n  // 登录按钮\n  GestureDetector(\n              onTap: () async {\n                final credential = await SignInWithApple.getAppleIDCredential(\n                  scopes: [\n                    AppleIDAuthorizationScopes.email,\n                    AppleIDAuthorizationScopes.fullName,\n                  ],\n                );\n                login(credential);\n              },\n              child: Container(\n                decoration: const BoxDecoration(\n                  color: Colours.btnEnableColor,\n                  borderRadius: BorderRadius.all(Radius.circular(28)),\n                ),\n                constraints: BoxConstraints.expand(width: sWidth - 64, height: 56),\n                child: const Center(\n                  child: Text(\"Continue with Apple\", style: TextStyle(\n                    color: Colors.black,\n                    fontFamily: 'SF',\n                    fontWeight: FontWeight.w700,\n                  ),),\n                ),\n              ),\n            )\n  ...\n}\n\n```\n3. 将苹果登录获取到的credential通过接口，发送给后端服务器去调用Apple服务。\n4. Apple开发者账号的证书中心网站中，需要配置开发证书和发布证书支持Sign In with Apple的功能。这个直接打开证书配置中心网站操作即可：[https://developer.apple.com/account/resources/](https://developer.apple.com/account/resources/)\n5. 如果想要同时支持flutter打出web、Android的包，那么需要这个证书中心配置service id，这个id用来做clientid。这个在我之前的uni-app项目中有提到，可以参考：[https://www.xinwei.ltd/article/123](https://www.xinwei.ltd/article/123)\n6. 在证书中心需要配置一个key，配置key的操作，也可以参考我之前的文章：[https://www.xinwei.ltd/article/123](https://www.xinwei.ltd/article/123)，key创建成功后，需要下载下来给后端，后端服务需要用到这个文件。\n7. 使用Xcode打开flutter中的iOS工程，选中Runner的target，添加Sign In with Apple功能。\n![sign in with apple](https://image.xinwei.ltd/image1731145116775.png)\n8.完整的代码就是上面贴出来的代码，步骤也很简单，集成进去，然后测试，一切应该都OK的。\n\n到此就结束了，祝集成顺利。\n","本文介绍如何在flutter中实现Apple的第三方登录，非常容易实现，这里简单记录一下。","https://image.xinwei.ltd/image1731144292470.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",11,{"id":24,"name":26,"parentId":21},"Flutter",[],"",2530,0,"flutter apple login,apple login,flutter apple,flutter ios,flutter苹果登录,flutter"]