微信第三方网页授权获取openid并注册（非小程序）

Posted 2023-03-21

参考技术A //参考 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#1

<template>
<div>
<div id="login_container"></div>

<div class="formbox">
<el-form
v-if="register"
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="用户姓名" prop="username">
<el-input v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电话号码" prop="tel">
<el-input v-model="ruleForm.tel" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label-width="0px">
<el-button type="primary" @click="submitForm('ruleForm')"
>注册</el-button
>
</el-form-item>
</el-form>
<el-result v-if="resSuccess" icon="success" title="注册成功"></el-result>
<el-result v-if="isRegister" icon="success" title="已注册"></el-result>
</div>
</div>
</template>

<script>
const appid = "wxb34e237212fbedf7";
const secret = "1c71e022914c722993350ab39bbcbcd0";
import axios from "axios";
const Base64 = require("js-base64").Base64;
export default
data()
let checkTel = (rule, value, callback) =>
if (!value)
return callback(new Error("电话号码不能为空"));

setTimeout(() =>
callback();
, 1000);
;
let validateName = (rule, value, callback) =>
if (value === "")
callback(new Error("姓名不能为空"));
else
callback();

;
return
code: "",
openid: "", //o2bOZ1TcyQMXYKe4PQZuAFnnjjDM
register: false,
resSuccess: false,
isRegister: false,
res: "init",
ruleForm:
username: "",
tel: "",
,
rules:
username: [ validator: validateName, trigger: "blur" ],
tel: [ validator: checkTel, trigger: "blur" ],
,
;
,
mounted()
// if (!window.localStorage.getItem("openId"))
// 如果缓存localStorage中没有微信openId，则授权
this.getCode();
// this.getVerify()
//
,
methods:
getCode()
// 非静默授权，第一次有弹框

,
;
</script>

<style>
.formbox
width: 90%;
margin: 100px auto;

</style>

微信授权获取code/openid

微信网页授权

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

关于网页授权回调域名的说明

1、在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头； 

2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权 

3、如果公众号登录授权给了第三方开发者来进行管理，则不必做任何设置，由第三方代替公众号实现网页授权即可。

检查微信授权的网页服务。

网页帐号   网页授权获取用户基本信息     无上限     修改       

点击修改，进去把http://www.xxxx.cn 改为www.xxxx.cn就不会出现redirect_uri 参数错误！

注意：http://www.xxxx.cn这样是可以通过网页授权安全监测的，我们不知道这是有问题的，后来程序执行调用的时候发现redirect_uri 参数错误，查看文档，回来发现，原来是这里的错误。

//获取用户的openid
  function getBaseInfo(){
   //1.获取到code
   $appid="qq1813284q1q6q8888";//这里的appid是假的演示用
   $redirect_uri=urlencode("http://www.xxxx.cn/xxx.php/Index/getUserOpenId");//这里的地址需要http://
   $url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$appid."&redirect_uri=".$redirect_uri."&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
   header(‘location:‘.$url);
  }

  function getUserOpenId(){
   //2.获取到网页授权的access_token
   $appid="qq1813284q1q6q8888";//这里的appid是假的演示用
   $appsecret="61qqqq36745987167q73bq1q2552qq75";//这里的appsecret是假的演示用
   $code=$_GET[‘code‘];
   $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=".$appsecret."&code=".$code."&grant_type=authorization_code ";
   //3.拉取用户的openid
   $res = $this->http_curl($url,‘get‘);

　var_dump($res);//打印即可看到用户的openid

}