Веб-страница Wechat авторизует и получает информацию о пользователе

Node.js внешний интерфейс WeChat GitHub

представлять

Во многих приложениях WeChat H5, когда пользователи получают доступ к сторонним приложениям, требуется авторизация веб-страницы WeChat, и для многих операций, связанных с безопасностью, мы должны сначала получить информацию о пользователе, прежде чем продолжить.Эта статья кратко знакомит с процессом авторизации WeChat и через приложение WeChat Протестируйте учетную запись для имитации авторизации на веб-странице. Пользователь нажимает «ОК», чтобы войти на страницу авторизации, чтобы получить информацию о пользователе и отобразить ее на странице внешнего интерфейса. Окончательный эффект выглядит следующим образом.


Инструменты и подготовка к разработке

1. Инструменты разработчика WeChat и тестовая учетная запись WeChat

Поскольку он авторизован WeChat, его необходимо использовать в среде WeChat.здесьУстановите инструменты разработчика WeChat, так как своего приложения у нас нет, нам также необходимоПубличная платформа микроканалаПодайте заявку на номер теста интерфейса, который эквивалентен нашему стороннему приложению. 

2. Настройка параметров

После входа в тестовую учетную запись вы можете просмотреть информацию о своем appId и appsecret, а также изменить основную информацию о пользователе посредством авторизации веб-страницы службы веб-страницы в таблице разрешений пользовательского интерфейса на 127.0.0.1:8800, что является адресом на который перезвонит пользователь после подтверждения авторизации.Адрес фоновой обработки приложения, как показано ниже


Наконец, достаньте свой WeChat и отсканируйте код, чтобы пройти тестовый номер, как показано на рисунке ниже.

 

Введение в процесс авторизации WeChat

Для конкретного процесса и подробного ознакомления вы можете перейти на официальный сайтТехническая документация общедоступной платформы WeChatПросмотр, грубо разделенный на четыре шага:  

1. Направьте пользователя на страницу авторизации, чтобы согласиться с авторизацией.В это время будет вызван API WeChat для получения кода.

2. После прохождения авторизации будет запрошен callback-адрес с параметром code  

3. Получите код в фоновом режиме и снова вызовите интерфейс WeChat, чтобы обменять авторизацию веб-страницы access_token и openid.  

4. Получите базовую информацию о пользователе, авторизовав access_token и openid на веб-странице (при наличии unionid будет также получен параметр unionid)

Официально начать  

Подробный код можно скачать на github по адресу https://github.com/wangfengyuan/wxAuthorize.

1. Исходный код

let express = require("express");const https = require('https');
let app = express();
//appIDlet 
appID = `wxec6fa9e9bc03d885`;
//appsecretlet 
appSerect = `4c8a0d14cff08959b4e17334cabf9cf0`;
//点击授权后重定向url地址
let redirectUrl = `/getUserInfo`;
let host = `http://127.0.0.1:3000`;
//微信授权api,接口返回code,点击授权后跳转到重定向地址并带上code参数
let authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=` +    `${host}${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
app.get("/login", function(req, res) {    
    res.sendFile(path.resolve(__dirname,'login.html'));
});
app.get("/auth", function(req, res) {    
    res.writeHead(302, {    
        'Location': authorizeUrl  
     });    
    res.end();
});
app.get("/getUserInfo", function(req, res) {    
    let code = req.query.code;    
    let getaccess = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;    
    //通过拿到的code和appID、app_serect获取access_token和open_id    
    https.get(getaccess, (resText) => {        
        var ddd = "";        
        resText.on('data', (d) => {
            ddd += d;        
        });
        resText.on('end', () => {
            // console.log(ddd);
            var obj = JSON.parse(ddd);
            var access_token = obj.access_token; 
            var open_id = obj.openid;            
            //通过上一步获取的access_token和open_id获取userInfo即用户信息
            let getUserUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;
            https.get(getUserUrl, (resText) => {
                user = "";
                resText.on('data', (d) => {
                    user += d;
                });
                resText.on('end', () => {
                    console.log(user);
                    var userobj = JSON.parse(user);
                    res.send(userobj);
                    console.log(userobj);
                });
            })        });
    }).on('error', (e) => {
        console.error(e);
    }); 

app.listen(3000);

При его использовании вам нужно заменить appID и appSerect на ваши соответствующие параметры, потому что наши запросы в определенном порядке, но нода отправляет запросы асинхронно, поэтому наши запросы вложены в три слоя, а код уродлив.Так что здесь мы можем использовать ES6 async и await, чтобы решить ад асинхронного обратного вызова. 

2. Улучшенный код с использованием ES6 async и await

async function wxAuth(req, res) {
    //解析querystring获取URL中的code值    
    let code = req.query.code;
    //通过拿到的code和appID、app_serect获取返回信息
    let resObj = await getAccessToken(code);
    //解析得到access_token和open_id
    let access_token = resObj.access_token;
    let open_id = resObj.openid;
    //通过上一步获取的access_token和open_id获取userInfo即用户信息
    let userObj = await getUserInfo(access_token, open_id);
    console.log(userObj);
    res.render(path.resolve(__dirname,'userInfo.ejs'), {userObj: userObj});
    // res.send(userObj);}

//通过拿到的code和appID、app_serect获取access_token和open_id
function getAccessToken(code) {
    return new Promise( (resolve, reject) => {
        let getAccessUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;
        https.get(getAccessUrl, (res) => {
            var resText = "";
            res.on('data', (d) => { 
               resText += d; 
            });
            res.on('end', () => {
                var resObj = JSON.parse(resText);
                resolve(resObj);
            });
        }).on('error', (e) => {
            console.error(e);
        });
    });
    }
//通过上一步获取的access_token和open_id获取userInfo即用户信息
function getUserInfo(access_token, open_id) {
    return new Promise( (resolve, reject) => {
        let getUserUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;
        https.get(getUserUrl, (res) => {
            var resText = ""; 
            res.on('data', (d) => {
                resText += d;
            });
            res.on('end', () => {
                var userObj = JSON.parse(resText);
                resolve(userObj);
            });
        }).on('error', (e) => {
            console.error(e);
        });
    })}

После модификации поток кода стал намного понятнее.Наконец, после нажатия кнопки «Подтвердить» для входа в систему полученный userObj будет отображаться на странице внешнего интерфейса через шаблон ejs, и вы можете увидеть рендеринг, отображаемый в начале статьи. .  

напиши в конце

Я только начал работать с интерфейсом не так давно. Недавно я проходил стажировку в компании и находился под влиянием моих коллег, поэтому я также начал писать статьи, чтобы зафиксировать свой опыт обучения. Это первый раз, когда я пишу статью, поэтому, возможно, не очень хорошо Если у вас есть какие-либо предложения по коду, пожалуйста, поделитесь ими, спасибо!



Категории