ionic5+vue3的app支持苹果登录

注意!本文是app授权 不是web授权 确认后再往下看 避免浪费时间

准备功能所需的物料

关于在苹果开发者网站上创建app、创建server id和创建密钥

这位同学总结的很好 直接看:juejin.cn/post/684490...

我们需要的三个东西:

1、这里的Identifier

2、进入后填写的Return URLs

3、密钥文件 .p8结尾的文件

准备好后 开始写代码------前端

一、下载capacitor插件

npm i @capacitor-community/apple-sign-in"

二、使用插件唤起苹果授权

javascript 复制代码
    const options: SignInWithAppleOptions = {
      clientId: "xxxxx", (填刚刚的Identifier)
      redirectURI: "https://xxxx/redirect",(填刚刚的Return URLs)
      scopes: "email name",
      state: "12345",
      nonce: "nonce",
    };

    SignInWithApple.authorize(options)
      .then((result: SignInWithAppleResponse) => {
        if (result) {
          //这里的result.response.identityToken作为参数给后端
          //拿着参数请求接口
        }
      })
      .catch((error) => {}
      });

(前端测试的时候注意:macWeb上授权了也没有result 得在ios设备去操作)

三、把.p8结尾的文件发给后端

接下来是接口------后端

我们是app授权所以用JWT, web授权才用OAuth

参考文章:www.cnblogs.com/jice/p/1634...

总流程:

相关推荐
冰敷逆向3 分钟前
京东h5st纯算分析
java·前端·javascript·爬虫·安全·web
Laurence29 分钟前
从零到一构建 C++ 项目(IDE / 命令行双轨实现)
前端·c++·ide
雯0609~39 分钟前
hiprint-官网vue完整版本+实现客户端配置+可实现直接打印(在html版本增加了条形码、二维码拖拽等)
前端·javascript·vue.js
GISer_Jing41 分钟前
构建高性能Markdown引擎开发计划
前端·aigc·ai编程
CHU7290351 小时前
生鲜商城小程序前端功能版块:适配生鲜采购核心需求
前端·小程序
huangyiyi666661 小时前
Vue + TS 项目文件结构
前端·javascript·vue.js
0思必得02 小时前
[Web自动化] Selenium处理Cookie
前端·爬虫·python·selenium·自动化
徐同保2 小时前
react-markdown使用
前端·react.js·前端框架
2601_949857432 小时前
Flutter for OpenHarmony Web开发助手App实战:CSS参考
前端·css·flutter
无法长大2 小时前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css