使用微信小程序轻松快捷地完成扫码登录
最编程
2024-02-22 08:00:35
...
一直想做微信扫码登录,但是一个小博客网站,本来就不是盈利性质的,还要每年再支付开放平台的认证费用,实在没什么开发动力。最近使用腾讯文档,发现腾讯文档的扫码登录用的小程序,所以探索一下用微信小程序实现扫码登录。
——更新中,您当前看到的可能不是最新内容
一、首先描述一下使用场景
用户在后台可以通过扫一个二维码来绑定微信,之后即可在登录的时候选择微信扫码登录。
二、实现基础
1. 表设计
用户表不说,需要一个表存储用户、微信和小程序的对应关系,表设计如下:
id,user_id,appid,openid,created_at,updated_at
2. 二维码生成
微信小程序的扫普通二维码打开小程序需要企业认证,不过对于个人认证小程序提供了生成小程序acode的后端api,具体的后端api文档可以看这里。
生成二维码的时候可以设置scene
参数来携带需要的参数,使用page
参数来设置扫码后打开的小程序页面。
3. 小程序接口
3.1 绑定
post:/api/users/ianzhi/wechat
token: 二维码携带的识别令牌
api_token: api访问令牌
3.2 登录
post:/api/login/wechat
token: 二维码携带的识别令牌
api_token:api访问令牌
三、具体实现
1. 生成二维码
/**
* 获取不受限制的小程序二维码
*
* @param $page string 页面路径
* @param $scene string 携带参数
* @param $width int 宽度
* @param $color array 颜色
* @param $isHyaline boolean 是否透明底色
* @return string
*
* @throws Exception
*/
public function unlimitedAcode(string $scene, string $page='', int $width=50, array $color=[], bool $isHyaline=false)
{
$url = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit';
$query = [
'access_token' => $this->accessToken()
];
$data = [
'scene' => $scene,
'width' => $width,
'auto_color' => $color ? false : true,
'is_hyaline' => $isHyaline
];
if ($page) {
$data['page'] = $page;
}
if (!$data['auto_color']) {
$data['line_color'] = [
'r' => $color[0],
'g' => $color[1],
'b' => $color[2]
];
}
$client = new Client([
'query' => $query,
'body' => json_encode($data)
]);
$res = $client->post($url);
return $res->getBody()->getContents();
}
2. 生成具体包含业务逻辑的小程序码
/**
* 用于用户绑定小程序的二维码
* get: /users/ianzhi/wechat?mp=aaa
* @param Request $request
* @return ResponseFactory|Response
* @throws Exception
*/
public function wechatQrcode(Request $request)
{
$mp = $request->mp;
$token = md5($mp . $request->user()->name . time() . uniqid());
cache([$token => ['mp' => $mp]], Carbon::now()->addMinutes(5));
return response($mp->unlimitedQrcode($token, 'pages/weblogin/weblogin'))
->withHeaders([ 'content-type'=> 'image/png' ]);
}
3. 后台绑定页面
这个不再贴代码了,有二维码生成方法,基本没什么难度。
4. 小程序扫码后确认绑定
这个主要是使用scene接收一下二维码的scene参数,之后调用微信登录api,并向后台发送code和scene。
—— 持续更新中
文章作者ianzhi,原文地址:https://cloud.tencent.com/developer/article/1476880
文章版权归作者所有,转载请保留此声明。
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
我的第一个微信小程序 "Hello World"(超详细)--我的解决方法是使用快捷键Ctrl+shift+Esc打开任务管理器,将打开的微信开发者工具内部的所有进程关闭,然后右键点击桌面上的微信开发者工具,以管理员身份运行微信开发者工具就可以成功打开微信开发者工具登录界面了!以下是开发者创建微信开发者工具登录界面的步骤汇总
-
如何让网站通过微信扫码轻松快捷地登陆 - 第一步:准备工作指南
-
如何在微信小程序中启用无缝扫码功能(使用uniapp开发)
-
如何轻松快速实现微信小程序的扫码功能
-
使用微信小程序轻松快捷地完成扫码登录