uni-app разрабатывает H5-реализацию стороннего авторизованного входа в WeChat

uni-app

недавно использованныйuni-appЯ разработал проект H5, который использует сторонний авторизованный вход в WeChat.Это первый раз, когда я это сделал.Я поделюсь с вами идеей реализации, и я надеюсь, что это будет полезно для всех!

Авторизация WeChat

Есть 2 способа авторизации WeChat:静默授权а также非静默授权.

Тихая авторизация:scope=snsapi_base. Всплывающего окна нет, можно получить только openid пользователя.

не молчаливая авторизация:scope=snsapi_userinfo. Существует всплывающее окно, которое требует, чтобы пользователь вручную щелкнул, чтобы согласиться с авторизацией, и можно получить openid пользователя, псевдоним, аватар и пол.

Процесс авторизации

1. Как только страница загрузится, определить есть ли код (т.к. после успешной авторизации текущая страница будет обновлена. В это время следует определить есть ли код при загрузке страницы. Если есть код, напрямую передайте код фоновому серверу)

onLoad(e) {
    let code = this.getUrlCode('code')
    console.log(code)
    if(code !== null || code !== "") {
        this.getOpenidAndUserinfo(code)
    }
},

2. Направьте пользователя на страницу авторизации, чтобы согласиться с авторизацией и получить код.

// 获取code
    // 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
    getCode () {
        if(isWechat()) {
            // 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
            let code = this.getUrlCode('code')
            if (code === null || code === '') {
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri=' + encodeURIComponent('http://127.0.0.1/pages/views/profile/login/login') + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                // redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
                // 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
                // http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
            }
        }
    },
    
    getUrlCode (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
    },
    
    const isWechat = () => {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
    }

Параметр Описание

параметр Это необходимо иллюстрировать
appid да Уникальный идентификатор официального аккаунта
redirect_url да Адрес ссылки обратного звонка перенаправляется после авторизации, для обработки ссылки необходимо использовать encodeURIComponent
response_type да Тип возврата, пожалуйста, введите код
scope да Метод авторизации, если это snsapi_base (страница авторизации не всплывёт, сразу перейти, можно получить только openid пользователя), если это snsapi_userinfo (всплывёт страница авторизации, пользователю нужно нажать вручную, чтобы согласиться с авторизация, а также openid пользователя, никнейм, аватар, пол)
state нет Параметр состояния будет приведен после перенаправления, а разработчик может заполнить значение параметра a-zA-Z0-9, до 128 байт
#wechat_redirect да Независимо от того, открываете ли вы его напрямую или делаете 302 перенаправление страницы, вы должны ввести этот параметр

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

Как изменить доменное имя обратного вызова авторизации? —— Перейдите в раздел «Разработка — Разрешение интерфейса — Веб-служба — Авторизация веб-страницы для получения основной информации о пользователе — Изменить» на официальном сайте официальной учетной записи платформы.

3. Передайте код на фоновый сервер через интерфейс

getOpenidAndUserinfo(code) {
    uni.request({
        url: 'http://127.0.0.1/api/wxLogin?code='+code+'&state=state&appid='+appid,
        success: (res) => {
            console.log('通过code获取openid和accessToken', res)
            if(res.data.code === 200) {
                // 登录成功，可以将用户信息和token保存到缓存中
                uni.setStorageSync('userInfo', res.data.result.userInfo)
                uni.setStorageSync('token', res.data.result.token)
            }
        }
    })

4. Внешний интерфейс получает данные, возвращаемые фоном

Формат возвращаемых данных следующий:

{
    code: 200
    message: "登录成功"
    result: {
        token: "54f663ca-45d4-4758-97a7-f727b942c09a"
        userInfo: {
            avatar: "http://thirdwx.qlogo.cn/mmopen/vi_32/MXuWgYbeVv5icyS4XBz28vpdh4iaRJAP3WYQ2uHMBUFcjvcHwykZ5wYPJG4CibJGAMv73n813vypau7Rs4iaA1uiaIw/132",
            nickName: "Allen",
            sex: 2,
            openid: "oPSEKwuzvwfZ5NEHhn9FBMJrNXpM",
            unionid: "o_ra9t3byZL5dMG1M-p2xOBFRAyc",
        }
    }
}

Параметр Описание

параметр описывать
avatar Аватар пользователя, последнее значение представляет размер квадратного аватара (возможны необязательные значения 0, 46, 64, 96, 132 и 0 представляет собой квадратный аватар 640*640). нет аватара. Если пользователь изменит аватар, исходный URL-адрес аватара станет недействительным.
nickName Прозвище пользователя
sex Пол.值为1时是女性，值为2时是男性，值为0时是未知
openid Уникальный идентификатор пользователя
unionid Это поле появится только после того, как пользователь привяжет официальную учетную запись к учетной записи WeChat Open Platform.

О механизме unionid

Ссылка на ссылку:WeChat открыть документ

Так как я первый раз обращаюсь к сторонней функции авторизации WeChat, изучаю день-два, на самом деле достаточно просто посмотреть официальную документацию и реализовать пошагово. Если в моем резюме есть ошибки, поправьте меня!

Категории