假设我们选择自己用SDK对接,那么一个完整的流程是怎样的呢?我们来捋一捋,让你心里有个谱,就算找程序员帮忙,你也知道他在干什么。
1.放置登录按钮:在你的网站登录页,放上一个“用XX登录”的按钮,比如“用微信登录”。
2.用户点击按钮:用户点击后,你的网站代码会生成一个特殊的请求链接,带着你的AppID和回调地址,把用户浏览器重定向到微信的授权页面。
3.用户授权:用户在微信的页面上确认授权(可能会要求扫码或输入账号密码)。
4.平台回调:微信确认授权后,会根据你之前提供的回调地址,把用户浏览器跳转回你的网站,并且会在网址后面附带一个临时的“授权码(code)”。
5.用码换“令牌”:你的网站后台(服务器)需要立即捕捉到这个code,然后拿着这个code、你的AppID和AppSecret,秘密地再向微信服务器发起一个请求。微信验证无误后,会返回一个访问令牌(Access Token)和用户的唯一标识(OpenID)。
6.获取用户信息(可选):你可以再用这个Access Token去请求微信,获取用户同意的公开信息,比如昵称、头像。
7.创建本地会话:拿到OpenID(和用户信息)后,你的网站服务器就知道“哦,是微信上的这个用户来了”。然后,你可以在自己的数据库里查询,这个OpenID是不是已经绑定过你网站的一个本地账号了?
*如果绑定了,就直接让这个本地账号登录。
*如果没绑定,就为他创建一个新的本地账号,并把OpenID和这个新账号绑定起来。下次他用微信登录,就直接找到这个账号了。
8.登录成功:最后,给你的用户浏览器设置一个登录成功的凭证(比如Session或Cookie),然后跳转到网站首页或用户之前想访问的页面。用户就看到自己已经登录了。
看,关键步骤其实就是:跳出去授权 -> 拿码换令牌 -> 用令牌识用户 -> 绑定或创建本地账号。
为了让整个过程更顺利,有几个地方需要特别留心,我把它加粗了:
*回调地址必须绝对准确:这是失败的最高发原因。在平台后台配置的回调地址,必须和你代码里使用的、网站能真实访问的地址一模一样,包括`http`还是`https`,一个字母都不能错。
*AppSecret是最高机密:这个字符串永远不要放在网站的前端代码(HTML、JavaScript)里,因为前端代码对用户是公开的。它必须放在你的服务器后端代码中,由服务器去使用。泄露了AppSecret,别人就能冒充你的应用。
*处理好“绑定”与“解绑”:考虑到用户可能想更换绑定的社交账号,或者一个本地账号想绑定多个社交账号(比如既绑微信又绑QQ),你的数据库设计要能支持。最好在用户中心的设置里,提供“绑定第三方账号”和“解绑”的选项。
*一定要有备选方案:不能只提供一键登录。必须同时保留传统的“邮箱/手机号+密码”注册登录方式。因为不是所有用户都想用社交账号登录,或者他可能在某些环境下无法使用那个社交App。
为了更直观,我们简单对比一下前面提到的几种方法:
| 实现方式 | 适合人群 | 优点 | 缺点 |
|---|---|---|---|
| :--- | :--- | :--- | :--- |
| 建站平台/插件内置 | 绝对新手,使用Shopify、WordPress等 | 最简单快捷,无需编码,后台填ID即可 | 功能可能受平台限制,灵活性较低 |
| 使用平台官方SDK | 有一定开发能力或雇了开发者 | 功能完整、稳定,遵循官方最佳实践 | 需要开发知识,每个平台单独对接较麻烦 |
| 使用第三方聚合服务 | 需要对接多个平台,想统一管理 | 一次集成,多平台通用,管理后台清晰 | 可能产生额外费用,依赖第三方服务稳定性 |
所有配置和代码都完成后,千万别以为就万事大吉了。必须进行完整的测试:
*测试从点击按钮到跳转授权页面是否正常。
*测试授权后是否能正确跳回你的网站。
*测试新用户是否能成功创建账号并登录。
*测试老用户(已绑定)是否能直接登录。
*测试在手机和电脑上是否都工作正常。
*测试取消授权会怎样。
多找几个朋友用真实的社交账号帮你试试,自己也要用不同账号多测几遍。开发过程中,各个平台的“沙箱”或“测试模式”是你的好朋友,先用测试环境搞通,再上生产环境。
版权说明:立即拨打咨询热线,获取专业的建站方案和优惠报价