[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f6Zk4cNGxflPvgCdXvy3Exk1LY81g_4N0zn6No-VVVUk":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":33,"notice":33,"visitCount":38,"commentCount":17,"keywords":39},123,"2024-08-18T18:08:17.125Z","web网页集成Apple Sign in苹果授权登录","## 一、概要\n现在越来越多的应用都集成了第三方授权登录了，而且由于苹果的iOS app上架审核规则，即如果有第三方授权登录，那么必须接入苹果Apple授权登录。那么针对苹果账号，网页端的苹果授权登录自然而然也变得很重要。\n\n## 二、Apple Sign In官方文档\n[https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/)\n\n## 三、步骤\n### 3.1 web接入Apple Sign In所需的资料\n- 1. 一个Apple 开发者账号\n- 2. 开发者账号下配置一个App Id\n- 3. 开发者账号下配置一个Service ID\n- 4. 开发者账号下给Service ID的sign in Apple编辑中配置domains和website\n> 针对一个Service ID，公司账号可以注册上限100个的网站，个人账号上限10个\n- 5. 开发者账号下给新建一个key（可以下载导出p8格式文件，服务端会需要到）\n- 6. 如果是公司账号要给服务端team id（就是右上角账号名字中的一组字符串）.\n\n针对上述所需的资料，创建App Id的流程很简单，基本和Service ID类似，所以这里不赘述。\n\n### 3.2 创建Service ID\n在Identifier下，选择Service Ids类型，然后点击Identifiers旁边的“+”号\n![创建Service ID - 1](https://image.xinwei.ltd/11724001528643.jpg)\n\n输入service id的描述，identifier（就是website网页上配置的**client ID**），要记得勾选 `Sign in with Apple`.\n![创建Service ID - 2](https://image.xinwei.ltd/image1724002021317.png)\n\n配置`Sign in with Apple`，点击`Configure`\n![点击Configure](https://image.xinwei.ltd/21724002446590.jpg)\n- 选择一个App ID\n- 配置网站的域名（我这里是测试和正式环境都配置了，localhost配置不了）\n- 配置Return URLs（这里是需要提供一个服务端的接口，因为Apple会给这里面的url发送post请求）\n- 注意点：domains和return urls都是用英文逗号`,`隔开的。domains中不要加http或者https，return urls中是要加http和https。\n![配置域名、网址](https://image.xinwei.ltd/31724002623205.jpg)\n\n点击Next，点击Done就ok了。\n![确认website urls](https://image.xinwei.ltd/41724002974138.jpg)\n\n### 3.3 新建一个key\n![新建一个key](https://image.xinwei.ltd/image1724003234060.png)\n\n可以下载p8文件出来，给服务端\n![download key](https://image.xinwei.ltd/71724003479138.jpg)\n\n\n### 3.4 网页的html中配置\n如果要使用service id中的return urls，那就需要服务端提供post接口。如果不用服务端，只用前端介入的话，可以使用pop up的弹出窗口模式。\n> 如果使用pop up方式，那么在Facebook等第三方app中显示网页时，授权弹窗会被阻止，导致流程中断，切记\n\n在html中配置script脚本\n```html\n\u003Cscript type=\"text/javascript\" src=\"https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js\">\u003C/script>\n```\n\n使用js或者ts脚本\n```js\nAppleID.auth.init({\n      clientId : '[CLIENT_ID]',\n      scope : '[SCOPES]', // 比如[ 'name', 'email' ]\n      redirectURI : '[REDIRECT_URI]',\n      state : '[STATE]',\n      nonce : '[NONCE]',\n      usePopup : true // 这里如果是true，那么就是使用弹窗授权, return urls就用不到\n});\n\n// 直接使用promise的方式，当然也有使用document监听的\nAppleID.auth.signIn()\n.then(res => {\n  \n})\n.catch(err => {\n  \n});\n\n// 可选，document监听\n// Listen for authorization success.\ndocument.addEventListener('AppleIDSignInOnSuccess', (event) => {\n    // Handle successful response.\n    console.log(event.detail.data);\n});\n\n\n// Listen for authorization failures.\ndocument.addEventListener('AppleIDSignInOnFailure', (event) => {\n     // Handle error.\n     console.log(event.detail.error);\n});\n```\n\n使用signin方法得到的数据就是包括code、id_token参数的res，将这2个参数传给自己公司的接口，让服务端去从Apple端获取用户信息。\n\n\n## 四、服务端所需的资料\n- Apple开发者账号的team id\n- Apple开发者账号的service id\n- Apple开发者账号的key文件（p8文件）\n\n以上大概就是这些了，希望对大家有帮助。\n","现在越来越多的应用都集成了第三方授权登录了，而且由于苹果的iOS app上架审核规则，即如果有第三方授权登录，那么必须接入苹果Apple Sign in授权登录。那么针对苹果账号，网页端的苹果授权登录自然而然也变得很重要。","https://image.xinwei.ltd/11724001528643.jpg",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技术",32,{"id":24,"name":26,"parentId":21},"前端",[28],{"id":29,"createAt":30,"content":31,"articleId":7,"userId":13,"user":32,"replyToUid":34,"replyToUser":35,"status":17,"statusDes":33,"replies":37},11,"2024-08-18T18:09:58.199Z","service id就是各端所需的client id.",{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":33,"createdAt":20},"",0,{"phone":33,"userId":34,"nickName":33,"vipType":34,"avatar":33,"sign":33,"createdAt":36},"0001-01-01T00:00:00Z",null,3581,"web apple sign in,apple sign in,apple web sign,apple sign in web,apple登录,apple登录网页集成,apple集成"]