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...

总流程:

相关推荐
创新技术阁36 分钟前
FastapiAdmin 系统日志体系与核心配置参数详解
前端·后端·fastapi
掘金酱37 分钟前
【社区公告】签到与矿石奖励解耦说明
前端
promiseThen39 分钟前
LWC Workflow:用 7 个 Cursor Skill 搭一条 AI 协作开发流水线
前端·ai编程
一个游离的指针1 小时前
函数管道:消除深度嵌套调用
前端·javascript
浅诺1 小时前
Nginx sub_filter 的“幽灵陷阱”:为什么页面能打开,懒加载的 JS 却全是 404?
前端
PBitW1 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?
前端·webpack·typescript·vite
光影少年2 小时前
react navite手写 FlatList 优化配置
前端·react native·react.js
曹牧2 小时前
C#:文本文件读取
服务器·前端·c#
柚yuzumi2 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙2 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript