La aplicación del sitio web está conectada al inicio de sesión de WeChat.
El sitio web está conectado al inicio de sesión de WeChat, lo que le permite al sitio web evitar el proceso de registro y aprovechar al máximo la enorme base de usuarios de WeChat para lograr una rápida difusión. Después de que el sitio web esté conectado al inicio de sesión de WeChat, los usuarios pueden iniciar sesión escaneando el código QR con su teléfono móvil, lo que simplifica el proceso de registro del usuario y mejora la conversión del tráfico de usuarios de manera más eficiente.
2. Debes presentar tu solicitud antes de iniciar sesión en WeChat.
Antes de conectarse a WeChat para iniciar sesión, el sitio web debe solicitar el appid y la clave de aplicación correspondientes para garantizar que el sitio web y los usuarios puedan verificarse y autorizarse correctamente en el proceso posterior que aplicamos en el sitio web oficial; .
3. Agregue código relevante al front-end del sitio web oficial.
let nowUrl = ubicación.href
let result =/code =(w *)& state=([0-9]*)/. exec(nourl);
if (resultado){
ventana . postmessage(nourl, ' * '); p>4. La interfaz del sitio web incorpora el ícono del código QR de inicio de sesión de WeChat en una P y muestra P.
! function(a, b, c) {
función d(a) {
var c = " default
a.self_redirect ===! 0 ? c = "verdadero": a.self_redirect ===! 1. & amp(c = "falso"
var d = b.createElement("iframe"),
e = "/conectar/qrconnect? appid = "+a . appid+" & alcance = "+a . alcance+" & redirección uri = "+a . redirección _ uri+" & estado = "+a . estado+" & inicio de sesión _ tipo = jssdk & self _ redirección = " +c+' & tipo de estilo = '+(a . tipo de estilo | | ' ')+' & tipo de tamaño = '+(a . tipo de tamaño | | ' ') +' & amp;bgcolor = '+(a . bgcolor | | ' ')+' & amp;rst = '+(a . primero | | ' ');
e += a.style ? "&style=" + a.style:" ", e += a.href? "& amphref=" + a.href:" ", d.src = e, d.frameBorder = "0 ", d.allowTransparency = "true", d.scrolling = "no", d.width = "300px", d.height = "400px
var f = b.querySelector('.we chatlogin_col_wechatbunceddiv '); //Código QR de WeChat incrustado P
f .innerHTML = " ", f.appendChild(d)
}
a.WxLogin = d
}(ventana, documento);
estado constante = Número(nueva fecha()).
toString();//Obtener el valor de estado
ventana de almacenamiento de sesión. setitem('state', state)//Valor de estado temporal.
Const obj = new WxLogin({//Crea una instancia de un código QR.
self_redirect: true,
Id: "WeChat BouncedDiv", // El WeChat El icono del código QR incorpora el ID de p.
Appid: "wxfb8bf3273365770a", //Identificador único de la aplicación
Alcance: "snsapi_login",
Redirect_uri: " ", //Dirección de devolución de llamada
Estado: estado, //Se utiliza para mantener el estado de la solicitud y la devolución de llamada, y devolverlo al tercero tal como está después de la autorización de la solicitud; este parámetro se puede utilizar para evitar ataques CSRF (ataque de falsificación de solicitud de sitio transfronterizo)
});
5. El procesamiento después de que la autorización de inicio de sesión de WeChat en el front-end del sitio web sea exitosa
ventana en mensaje = función (e) {// Después de que la autorización de inicio de sesión de WeChat sea exitosa, el sitio web oficial activa un mensaje.
Supongamos que URL = e.data; //e.data="/? code = xxx & ampstate=xxx "
if(url.indexOf('?')) ! = -1){
url = url.substr(url.indexOf('?')))//url= "?code=xxx & ampstate=xxx "
Establecer arr = url.substr(1). split('&');//arr=["code=xxx","state=xxx"]
arr = arr . = item.split('= ')
let map = new map()
map.set(item[0], item[1])
item = Object.fromEntries(mapping)
Devolver elementos
})//arr=[{code:"xxx"},{state:"xxx"} ]
let old state = window . almacenamiento de sesión getitem(' state ');
Let newState = arr[1]. Estado;
//
//cargando div . display = ' flex '
// cargandoDiv.innerHTML = 'Iniciando sesión...'
$this.showVessel('loadingDiv ', true, () = & gt{//Muestra que has iniciado sesión.
$this.sm['loading'].startModule ( function(){
$this.showSubModule('cargando ', verdadero, función () {
if(estado antiguo === estado nuevo){
$ this.ep. Tercer inicio de sesión (0, código arr [0], 1, 1, 0, nulo, función (resultado) {// Enviar el tercer evento de inicio de sesión a la nube, el código es el código de inicio de sesión de WeChat.
if (resultado === null) {
$This. $router.push('/')//El inicio de sesión de WeChat es exitoso. p>} else {// El inicio de sesión de WeChat se realizó correctamente, debe vincular su número de teléfono móvil.
$this.openID = resultado//ID de usuario de WeChat
$this.showSubModule('loading ', false, function () {}, function () {})
$this.showVessel('loadingDiv ', false, ()= & gt{}, ()= & gt{})//Hide está iniciando sesión.
$this.showBindingPhone()//Vincular número de teléfono móvil.
}
}, función(error){
console.log(error)
})
}
}, función (){})
}, función (){})
}, ()= & gt{})
window.onmessage = null
}
},
6. Obtenga WeChat openid y access_token desde la nube del sitio web.
Función obtener openid _ wx (appid, appsecret, code, Successcb, error CB) {//Obtener openid y token de WeChat.
const request = require(global . ruta del nodo+"/node _ module/request ");
let URL 1 = '/SNS/oauth 2/access _ token? appid = '+appid+' & secret = '+app secret+' & code = '+código+' & Grant_type = código_autorización '
Request.get(
p>{
Sitio web: url1,
Método: "Obtener",
Sí,
Título: {
"Contenido- Type":"application/json",
},
}, función (error, respuesta, cuerpo) {
if (response.statusCode == 200) {
let data = JSON.stringify(body, null, 4); // Analiza la cadena del objeto, el tercer parámetro es el formato de sangría Formato, sangría de cuatro caracteres
.Let data 1 = (JSON . parse(data));
Let access _ token = data 1 . access _ token
Supongamos que OpenID = data 1. OpenID;
successCB(access_token, OpenID);
} De lo contrario {
ErrorCB(['¡Error al obtener información de WeChat! Código de estado: "+respuesta. Código de estado] );
}
}
);
}
7. Inicio de sesión de QQ.
El inicio de sesión de WeChat se puede incrustar en la página de inicio de sesión del sitio web, y la página de autorización de inicio de sesión de WeChat no se puede incrustar. , debe cerrar la página después de una autorización de inicio de sesión exitosa.
La dirección de devolución de llamada de inicio de sesión de WeChat puede especificar un directorio raíz de primer nivel o un subdirectorio de segundo nivel, como "" o "/qqLogin", el QQ. La dirección de devolución de llamada de inicio de sesión debe especificar un subdirectorio secundario, como "/qqLogin"
.