随着小程序的快速发展，越来越多的企业和开发者开始将其作为自己的业务入口或服务方式之一。小程序具有便捷、高效、轻量级等特点，成为了移动互联网时代用户获取、留存以及转化的重要工具。而在小程序中，授权登录是实现用户快捷登录和提升用户体验的常见方式之一。然而，由于微信对获取用户信息的接口进行了调整，现在授权登录需要用户主动设置，这给小程序的用户授权登录体验带来了一定的不便。但使用Web-view公众号授权则能够有效地解决这个问题。Web-view技术可以帮助小程序在无需离开应用的前提下，向用户呈现第三方网页的内容，并让用户进行相关的操作，例如使用微信账号授权登录。因此，在小程序中使用Web-view实现公众号授权登录，能够不仅提供更快捷、更高效的授权登录方式，同时避免了用户在设置方面的困扰。本篇文章将介绍如何使用Web-view实现小程序用户授权登录，并重点介绍web-view公众号授权的优点和实现方法，希望能为小程序开发和使用者提供指导，优化小程序的用户体验。
1.准备工作
- 认证过的服务号或小程序云开发的静态托管网站。
- 在公众号设置中添加网页授权域名。
- 在小程序开发设置中添加业务域名。
2.实现原理
公众号的网页授权可以获取微信用户的信息，通过web-view将H5页面嵌入小程序中，借助微信SDK可以实现H5页面向小程序中传递参数，从而将用户信息返回给小程序端。
3.基于uni-app的实现方法
（1）小程序中的实现方法
在mine.vue中有一个登录按钮跳转至一个授权页面login.vue，并且在onLoad中监听H5页面传来的数据：
<template>
<view>
<view @click="onlogoin()">授权登录</view>
</view>
</template>
<script>
export default {
methods:{
onlogoin() {
uni.navigateTo({url: '/pages/login/login'})
},
},
onLoad(e) {
// H5 页面传来的数据
console.log(e);
}
}
</script>
在login.vue页面中使用web-view嵌入H5页面：
<template>
<view>
<web-view :src="login_url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
login_url: ''
}
},
onLoad(option) {
let redirect_url = '填写自己的回调地址';
let appid = '填写自己公众号的appid';
this.login_url =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(redirect_url)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
},
}
</script>
（2）H5页面中的实现方法
在H5页面即回调地址的网页中编写代码，获取用户授权并拿到用户信息，最后通过微信 SDK 将数据返回给小程序，这里给出php实现的示例代码：
<?php
// 获取用户信息
function getUserInfo($appId, $appSecret, $code) {
// 获取access_token和openid
$url = 'https://api.weixin.qq.com/sns/oauth2/access_token' .
'?appid=' . $appId .
'&secret=' . $appSecret .
'&code=' . $code .
'&grant_type=authorization_code';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$jsonObj = json_decode($response);
if (isset($jsonObj->access_token) && isset($jsonObj->openid) && !isset($jsonObj->is_snapshotuser)) {
$accessToken = $jsonObj->access_token;
$openid = $jsonObj->openid;
// 拉取用户信息
$userinfoUrl = 'https://api.weixin.qq.com/sns/userinfo' .
'?access_token=' . $accessToken .
'&openid=' . $openid .
'&lang=zh_CN';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $userinfoUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$userinfoResponse = curl_exec($ch);
curl_close($ch);
$userinfoObj = json_decode($userinfoResponse);
if (isset($userinfoObj->nickname)) {
return $userinfoObj;
}
}
return null;
}
if (isset($_GET['code'])) {
// 授权回调处理逻辑
$code = $_GET['code'];
$state = $_GET['state'];
// 替换成你的应用ID和密钥
$appId = '填写自己公众号的appId';
$appSecret = '填写自己公众号的appSecret';
// 获取用户信息
$userInfo = getUserInfo($appId, $appSecret, $code);
if ($userInfo !== null) {
$nickname = $userInfo->nickname;
$avatar = $userInfo->headimgurl;
$openid = $userInfo->openid;
$unionid=$userInfo->unionid;
}
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信网页授权</title>
<!--微信 sdk-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
// 返回用户的 openid nickname avatar unionid 返回给mine页面
wx.miniProgram.reLaunch({url: `/pages/mine/mine?openid=<?php echo $openid; ?>&nickname=<?php echo $nickname; ?>&avatar=<?php echo $avatar; ?>&unionid=<?php echo $unionid; ?>`});
</script>
</head>
<body>
</body>
</html>
