Авторизация на веб-странице WeChat

Если во время разработки веб-продукту необходимо использовать функции WeChat, такие как авторизованный вход в WeChat, оплата WeChat, голосование WeChat и т. д. Я разрабатываю Dongdong как веб-проект. Однако, если вам нужен доступ к WeChat, вам нужно использовать WeChat. . Функции WeChat, связанные с веб-разработкой. Нам нужно получить обратный вызов от сервера WeChat. Например, когда пользователь сканирует код для входа в наш веб-проект, после того, как пользователь правильно авторизован, сервер WeChat может перезвонить по ожидаемому URL-адресу и вернуть ответ. соответствующую информацию о параметрах.

Процесс авторизации веб-страницы разделен на четыре этапа:

1. Попросите пользователя войти на страницу авторизации, чтобы согласиться на авторизацию и получить код.
2. Авторизация веб-страницы access_token через код (отличается от access_token в базовой поддержке)
3. если необходимо,разработка может обновить авторизацию веб-страницы access_token,Избегайте истечения срока действия
4. Получите основную информацию о пользователе через авторизацию веб-страницы, access_token и openid (поддерживает механизм UnionID) специфическийинтерфейс Пожалуйста, обратитесь к официальной документации за описанием параметров.：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

Что следует отметить: Первый шаг — получить код и установить параметр области, если значение параметра области — snsapi_base. (Страница авторизации не всплывает, переходит напрямую и может получить только openid пользователя), когда значение параметра области равно snsapi_userinfo. (Появится страница авторизации, и вы сможете узнать свой никнейм, пол и местоположение через openid. И, Даже если вы не подписаны на пользователя, вы все равно можете получить его информацию, если он разрешит это. ）

Авторизация на веб-странице WeChatразвиватьшаг

Здесь я непосредственно публикую этапы разработки и кода:

1. В Вичат Официальный доменное имя фоновой конфигурации аккаунта Следует отметить, что только аккаунты сервисов, сертифицированные Вичатом, имеют Авторизацию. на веб-странице Разрешения WeChat. Когда мы находимся в разработке, мы можем использовать прикладную тестовую учетную запись для отладки разработки. Тестовая учетная запись имеет разрешения интерфейса, которые есть у большинства учетных записей служб. Затем вам необходимо установить безопасное доменное имя JSинтерфейса в этих двух местах (доменное имя проникновения в интранет можно использовать на этапе разработки): Первое место:

Второе место (опустить):

Настроив их по отдельности, вы можете начать разработку, используя безопасное доменное имя.

При написании кода на бэкенде обычно используется официальный SDK: weixin-java-mp (было бы очень недружелюбно, если бы вы на каждом этапе отправляли параметры сплайсинга запроса на официальный сайт)

1. Введем следующие координаты <!--Вичатразвиватьsdk--> <dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId> <version>2.7.0</version> </dependency>
2. Добавьте его в файл конфигурации application.yml. <code class="language-yml">wechat: mpAppId: wx90a9158b6acc5584 mpAppSecret: ec23a5d78f12afa569c64794570d753c // Адрес обратного вызова серверного проекта projecturl: http://uhi4iv.natappfree.cc/
3. Напишите два файла конфигурации для внедрения в Spring. WechatAccountConfig.java

package cn.kt.mywxdemo.wechatmp.config;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import java.util.Map;
/**
 * Created by tao.
 * Date: 2023/3/21 15:02
 * описывать:
 */

@Data
@Component
//Получаем из файла конфигурации
@ConfigurationProperties(prefix = "wechat")
public class WechatAccountConfig {

    /**
     * Идентификатор общедоступной платформы
     */
    private String mpAppId;

    /**
     * Открытый ключ платформы
     */
    private String mpAppSecret;

    /**
     * Идентификатор шаблона вичат
     */
    private Map<String, String> templateId;
}

WechatMpConfig.java

package cn.kt.mywxdemo.wechatmp.config;

import me.chanjar.weixin.mp.api.WxMpConfigStorage;
import me.chanjar.weixin.mp.api.WxMpInMemoryConfigStorage;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
/**
 * Created by tao.
 * Date: 2023/3/21 15:00
 * описывать:
 */

@Component
public class WechatMpConfig {

    @Autowired
    private WechatAccountConfig accountConfig;

    /**
     * @author ：tao
     * @date ：Created in 2021/3/12 10:15
     * @param: ：
     * @return： WxMpService объект
     * Настройте wxMpConfigStorage и вернитесь. WxMpService объект
     */
    @Bean
    public WxMpService wxMpService() {
        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
        return wxMpService;
    }

    /**
     * @author ：tao
     * @date ：Created in 2021/3/12 10:20
     * @param: ：
     * @return： WxMpConfigStorage объект
     * Настройте AppId и AppSecret и получите WxMpConfigStorage. объект
     */
    @Bean
    public WxMpConfigStorage wxMpConfigStorage() {
        WxMpInMemoryConfigStorage wxMpConfigStorage = new WxMpInMemoryConfigStorage();
        wxMpConfigStorage.setAppId(accountConfig.getMpAppId());
        wxMpConfigStorage.setSecret(accountConfig.getMpAppSecret());
        return wxMpConfigStorage;
    }
}

1. Написать контроллер, взаимодействующий с сервером Вичат. WxJsController.java

package cn.kt.mywxdemo.wechatmp.controller;

import lombok.extern.slf4j.Slf4j;
import me.chanjar.weixin.common.api.WxConsts;
import me.chanjar.weixin.common.exception.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.bean.result.WxMpOAuth2AccessToken;
import me.chanjar.weixin.mp.bean.result.WxMpUser;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

/**
 * Created by tao.
 * Date: 2023/3/21 15:04
 * описывать:
 */

@Controller
@RequestMapping("/wechat")
@Slf4j
public class WxJsController {

    @Autowired
    private WxMpService wxMpService;

    @Value("${wechat.projecturl}")
    private String projectUrl;

    @GetMapping("/auth")
    @ResponseBody
    public String auth(@RequestParam(value = "echostr", defaultValue = «Не получено»). String echostr) {
        return echostr;
    }

    /**
     * @author ：tao
     * @param: ：
     * @return： Перенаправление на класс, который получает информацию о пользователе
     * Вичатавторизованный вход
     */
    @GetMapping("/authorize")
    public String authorize(@RequestParam(value = "returnUrl", defaultValue = "https://qkongtao.cn/") String returnUrl) throws UnsupportedEncodingException {
        log.info("【Авторизация на веб-странице WeChat] пришел, параметр={}", returnUrl);
        System.out.println("Входит:" + returnUrl);
        //1. Конфигурация
        //2. метод вызова
        String url = projectUrl + "wechat/userInfo";
        /*
         * эквивалент этой формы
         * URLEncoder.decode(returnUrl,"UTF-8"
         * https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
         */
        String redirectUrl = wxMpService.oauth2buildAuthorizationUrl(url, WxConsts.OAUTH2_SCOPE_USER_INFO, URLEncoder.encode(returnUrl, "utf-8"));
        log.info("【Авторизация на веб-странице WeChat】Получить код, результат={}", redirectUrl);
        return "redirect:" + redirectUrl;
    }

    /**
     * @author ：tao
     * @param: ：
     * @return： Перенаправление
     * Получить пользователя Информация,наконец Перенаправлениеназначенномуurl
     */
    @GetMapping("/userInfo")
    public String userInfo(@RequestParam("code") String code,
                           @RequestParam("state") String returnUrl) throws WxErrorException {
        /*Когда пользователь соглашается на авторизацию, будет произведен обратный вызов установленного URL-адреса и авторизация Передайте код,
        Затем используйте этот код, чтобы получить доступ токен, который также содержит openid пользователя и другую информацию*/
        WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();
        try {
            //Получить доступ token
            wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);
            log.info("【AccessToken：】{}", wxMpOAuth2AccessToken.getAccessToken());
        } catch (WxErrorException e) {
            log.error("【Авторизация на веб-странице WeChat】{}", e);
        }

        // получить openid
        String openId = wxMpOAuth2AccessToken.getOpenId();
        log.info("【openid：】{}", openId);
        log.info("[Я — адрес, по которому будет перезванивать клиентская часть:]{}", returnUrl + "&openid=" + openId);
        // Кстати, получите информацию о пользователе
        WxMpUser wxMpUser = wxMpService.oauth2getUserInfo(wxMpOAuth2AccessToken, "zh_CN");
        log.info("[Информация о пользователе:]{}", wxMpUser.toString());

        //Обратите внимание на параметры сварки.,Первый параметр необходимо добавить со знаком вопроса.,Далее используются параметры&Проблема сращивания
        //return "redirect:" + returnUrl + "/#/?openid=" + openId;
        return "redirect:" + returnUrl + "&openid=" + openId;
    }
}

Результаты бега

Приведенный выше код уже обработал процесс авторизации WeChat. Нам нужно только использовать интерфейс /authorize и передать URL-адрес обратного вызова (путь, который необходимо перенаправить после авторизации) для авторизации. Примеры следующие: uhi4iv.natappfree.cc — доменное имя фоновой привязки. http://uhi4iv.natappfree.cc/wechat/authorize?returnUrl=https://qkongtao.cn?1=1

Откройте результаты с помощью WeChat:

Поскольку я только что авторизовал это, я выполнил автоматическую авторизацию. В противном случае появится опция авторизации, требующая подтверждения пользователя.

Получить openid пользователя и основную информацию о пользователе.

Необходимо заранее объяснить:

1. openid и основы веб-авторизации Официальный аккаунтсосредоточиться Openid, полученный после на, отличается
2. Разница между access_token авторизации веб-страницы и обычным access_token
   • Авторизация на веб-странице WeChat реализуется через механизм OAuth2.0. Когда пользователь авторизуется Официальный. аккаунтназад,Официальный аккаунт может получить уникальный сертификат вызова интерфейса авторизации веб-страницы (токен авторизации веб-страницы).,Авторизирующий access_token через веб-страницу можно вызвать после авторизации.,Например, получение основной информации о пользователе;
   • Другое Вичатинтерфейс,Вам необходимо получить обычный вызов access_token через интерфейс «Get access_token» в базовой поддержке.
3. существоватьсосредоточиться накто и Официальный аккаунт генерирует сообщения после взаимодействия, Официальный аккаунтдоступныйсосредоточиться по openid пользователя (зашифрованный номер Вичата, каждому пользователю для каждого Официальный Openid аккаунта уникален. Для разных официальных аккаунт, у одного и того же пользователя разные openid). Официальный Через этот интерфейс аккаунт может получить основную информацию о пользователе на основе openid, включая язык и фокус. на время.
4. Описание механизма UnionID: пользователи инноваций могут получить основную информацию о пользователе через openid. Что требует особого внимания, так это то, что,Если у человека есть несколько мобильных приложений, веб-приложений и общедоступных аккаунтов.,Уникальность пользователя можно определить, получив UnionID в базовой информации о пользователе.,Потому что, пока это мобильное приложение, приложение для веб-сайта и публичная учетная запись под одной и той же учетной записью открытой платформы Вичат.,Unionid пользователя уникален. другими словами,тот же пользователь,Различные приложения на одной открытой платформе Вичат,Юнионид тот же.
5. Текущая база Официальная аккаунтсосредоточиться После получения openid фон не может получить аватар пользователя, информацию о псевдониме, адресе и другую информацию на основе openid и access_token, это должно быть сделано через механизм авторизации OAuth2.0; на веб-странице WeChat,существовать Пользователь подтверждает авторизациюназад Только тогда вы сможете получить аватар пользователя、Информация о никнейме、Адрес и другая информация.

Авторизация веб-страницы для получения информации о пользователе

Обратитесь к официальной документации：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#3

Если областью авторизации веб-страницы является snsapi_userinfo, разработчик теперь может получать информацию о пользователе через access_token и openid.

Метод запроса:

http: GET (используйте протокол https): https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

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

Результат запроса:

Искаженный псевдоним необходимо перекодировать с использованием utf8: String result = new String(nickname, "utf-8");

В приведенном выше контроллере также получается информация о пользователе:

Результаты фонового вывода следующие:

Подпишитесь на базовую общедоступную учетную запись, чтобы получить информацию о пользователе.

Официальная документация：https://developers.weixin.qq.com/doc/offiaccount/User_Management/Get_users_basic_information_UnionID.html#UinonId

По сути, он аналогичен вышеописанному. Он также обменивается информацией о пользователях через openid и access_token. Интерфейс выглядит следующим образом: Описание запроса на вызов интерфейса метод HTTP-запроса: GET https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN Описание параметра:

Результат следующий:

Видно, что по сравнению с Авторизацией на веб-сайте WeChat, базовый Официальный аккаунтсосредоточиться может получить относительно меньше пользовательской информации.

Загрузка исходного кода

Ссылка на исходный код：https://gitee.com/qkongtao/my-wx-demo