1、微信登录
微信.开放平台
1.1配置
在配置完后，
https://open.weixin.qq.com/connect/qrconnect?appid=wx462af8053e778495&redirect_uri=https%3A%2F%2Fdoctf.goddesses.net.cn%2Fpc%2Fview-web%2F%23%2Fmain-type&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
测试一下看是否配置正确，
如一直报：redirect_uri 参数错误，那需要看看回调授权的地址，是否是网站的域名（去除协议和后面的页面路径）
1.2使用
1.2.1、vue项目使用
使用第三方组件安装vue-wxlogin
npm install vue-wxlogin --save-dev
引入
import wxlogin from 'vue-wxlogin';
Vue.component('my-component',{components:{wxlogin}});
使用
<wxlogin
appid="xxxxxx"
:scope="'snsapi_login'"
:theme="'black'"
:redirect_uri="encodeURIComponent('xxxxxxx')"
:href="'data:text/css;charset=utf-8;base64,LmxvZ2luUGFuZWwgLnRpdGxlIHtkaXNwbGF5OiBub25lO30ubG9naW5QYW5lbCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4MHB4O21hcmdpbi10b3A6MDtib3JkZXI6MDt9Lm1haW4uaW1wb3dlckJveCB7d2lkdGg6IGF1dG87fQ=='"
rel="external nofollow">
</wxlogin>
1.2.2 原生使用
引入 http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
如使用vue 使用 ts 版本，则需要在global.d.ts里面增加
declare module 'vue-wxlogin'
declare const WxLogin: any
使用
new WxLogin({
self_redirect: true,
id: "loginImg", // 需要展示二维码的地方的id
appid: "xxx",
scope: "snsapi_login",
redirect_uri: encodeURIComponent('xxxx'),
state: "Math.random()",
style: "black", // black/white
href: ""
})
1.2.3样式href的生成
href的生成，下面代码可以在控制台运行生成
自己想改成的样子
var content = ".loginPanel .title {display: none;}.loginPanel .info {display: none;}.impowerBox .qrcode {width: 180px;margin-top:0;border:0;}.main.impowerBox {width: auto;}";
var blob = new Blob([content],{type: "text/css;charset=utf-8"});
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(e) {
// e.currentTarget.result ==>href填的内容
console.log(e.currentTarget.result)
}
1.3 根据获取到的code获取登录信息
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
appid 用唯一标识，在微信开放平台提交应用审核通过后获得
secret 应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
code 填写1.2.1重定向后获取的code参数
返回的参数
{
"access_token":"ACCESS_TOKEN", // 接口调用凭证
"expires_in":7200, // 接口调用凭证超时时间，单位（秒）
"refresh_token":"REFRESH_TOKEN", // 用户刷新access_token
"openid":"OPENID", // 授权用户唯一标识
"scope":"SCOPE", // 用户授权的作用域，使用逗号（,）分隔
"unionid":"o6_bmasdasdsad6_2sgVt7hMZOPfL" // 只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段
}
1.4 通过access_token调用接口获取用户及本信息
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
access_token 1.3中获取的接口凭证
openid 1.3中获取的授权用户唯一标识
返回参数
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"http://wx.qlogo.cn/mmopen/xxx",
"privilege":[ "PRIVILEGE1", "PRIVILEGE2" ],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
