1、Google
搜索Google Login Api 会发现原先基于platform.js的登陆功能即将弃用，
官方推荐使用新版登陆API
step1: 接入谷歌原生登陆按钮的示例代码如下：
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
// 登陆成功之后的回调函数
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
// 加载完成后初始化谷歌登陆实例
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // 设置按钮样式
);
google.accounts.id.prompt(); // 自动弹出登陆提示弹框
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
根据示例代码可以发现，初始化登陆实例我们需要一个“客户端ID”("YOUR_GOOGLE_CLIENT_ID")
step2:新建项目得到客户端ID
在谷歌云服务页面登陆后新建一个项目
进入新建的项目 选择左侧APIS&services Tab,然后新建”凭据“，选择“OAuth Client Id”
然后勾选 “Web Application” 点击创建
然后你就得到了一个客户端ID,复制到刚刚示例的初始化代码中“client_id”字段
为了支持本地测试环境测试，我们还需要在这个客户端ID中配置一些允许登陆访问的地址
*⚠️注意此处如果要添加localhost，必须同时添加带端口号和不带端口号的地址
step3:本地测试
将示例代码运行起来可以看到效果如下
登陆完成后会自动执行示例代码中“handleCredentialResponse”回调函数，返回JWT
利用拿到的JWT就可以做后续的操作啦！
实际测试环境中可能会遇到的问题：
1、生产环境允许登陆访问URL, 谷歌只允许我们配置https协议，但是某些情况下我们的网站只支持http
这时就需要用到一些代理工具来走通这套流程，这边使用Whistle结合SwitchyOmega
- 首先我们使用Whistle 将https代理到http
规则例如：www.test2.com/ www.test2.com/
(如果原先的接口地址采用//开头，还需要将https代理回http)
- 其次由于墙的原因，whistle代理与VPN代理冲突，需要用到Switch Omega
新建场景——>自动切换模式——>将谷歌相关域名配置到VPN代理，默认代理走Whistle
2、Apple
苹果登陆首先需要一个开发者账号（需要付费订阅）申请到clientId,具体申请流程不展开了
step1: web登陆配置
Configuring your webpage for Sign in with Apple
实例代码：
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
<script type="text/javascript">
// 初始化
AppleID.auth.init({
clientId : '[CLIENT_ID]',
scope : 'name email',
redirectURI : 'https://test2.com',
usePopup : true
});
</script>
</body>
<script>
// 登陆成功后的回调函数
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
// Handle successful response.
console.log(event.detail.data);
});
// 登陆失败后的回调函数
document.addEventListener('AppleIDSignInOnFailure', (event) => {
// Handle error.
console.log(event.detail.error);
});
</script>
</html>
*⚠️这里的redirectURI，必须使用https协议，并且在clientId配置项里进行过注册，还要与当前登陆发起的地址一致
