Wechat official account oauth2.0 authorizes login and displays user information

  OAuth yes Open Authorization Abbreviation , Open licensing .OAuth The protocol provides a secure authorization of user resources 、 Open and simple standards , That is, the third party can apply for the user's resources without using the user name and password . common OAuth2.0 Authorization scenarios include ：QQ、 WeChat 、 Today's headline 、 Tiktok 、 Microblogging 、GitHub etc. . such as , Use QQ The scenario of authorizing to log in to a third-party website , This eliminates the process of user registration , Improved user access experience .

One .OAuth2.0 Principles and web authorization

1.OAuth2.0 principle

According to the authorization code mode , First step acquisition code, Step 2 get access_token, Step 3 carry access_token Access to resources . Every step is through API Realized ： OAuth Relevant methods are Senparc.Weixin.MP.AdvancedAPIs Under the namespace OAuthApi Class ：

2. WeChat official account web page authorization

The web authorization process is divided into four steps ：
(1) obtain code： Guide the user to enter the authorization page to approve the authorization
(2) obtain access_token： adopt code Website authorization access_token
(3) Refresh access_token： if necessary , Developers refresh web authorization to avoid expiration
(4) Request resources ： Authorization via web page access_token and openid Get basic user information

3. Yes UnionID The understanding of the

When developers have multiple mobile applications 、 Website application and public account , User accounts are different . Wechat official solves this problem through wechat open platform , Different applications on the same wechat open platform [ such as , Mobile application 、 Website applications and public accounts ],UnionID It's the same , That is, the same account .
explain ： Another way you want is to identify the same user account through your mobile phone number .

Two . use Senparc Realization OAuth2.0 The process of

1.snsapi_userinfo and snsapi_base

snsapi_userinfo Users need to confirm and agree , and snsapi_base Is a static acquisition , Users have no perception . It should be noted that silent authorization in special scenarios ： For users who have been concerned about official account numbers , If the user enters the official account page from the official account or custom menu, the user page is authorized. , Even if scope by snsapi_userinfo, It's also silent authorization , Users have no perception .

2. Login entry

The login portal is located at WeiXinMPSDK/Samples/MP/Senparc.Weixin.Sample.MP/Controllers/OAuth2Controller.cs In the document Index() Method ：

//  The page that the user tries to enter and needs to log in 
public ActionResult Index(string returnUrl)
{
    ViewData["returnUrl"] = returnUrl;
    // This page guides the user to click authorize 
    ViewData["UrlUserInfo"] = OAuthApi.GetAuthorizeUrl(appId, "http://fengling.nat300.top/oauth2/UserInfoCallback?returnUrl=" + returnUrl.UrlEncode(), null, OAuthScope.snsapi_userinfo);//snsapi_userinfo Method callback address 
    ViewData["UrlBase"] = OAuthApi.GetAuthorizeUrl(appId, "http://fengling.nat300.top/oauth2/BaseCallback?returnUrl=" + returnUrl.UrlEncode(), null, OAuthScope.snsapi_base);//snsapi_base Method callback address 
    return View();
}

among ,OAuthApi.GetAuthorizeUrl() The specific implementation of the method is as follows ：

/// <summary>
///  Get the verification address 
/// </summary>
/// <param name="appId"> The only sign of official account number </param>
/// <param name="redirectUrl"> Callback link address redirected after authorization , Please use urlencode Handling links </param>
/// <param name="state"> Reset to bring back state Parameters , Developers can fill in a-zA-Z0-9 Parameter values for , most 128 byte </param>
/// <param name="scope"> Application authorization scope ,snsapi_base （ Do not pop up the authorization page , Direct jump , Only users can be obtained openid）,snsapi_userinfo （ Authorization page pops up , It can be done by openid Get a nickname 、 Gender 、 home . also , Even if you don't pay attention , As long as the user is authorized , Information can also be obtained ）</param>
/// <param name="responseType"> Return type , Please fill in code（ Or leave the default ）</param>
/// <param name="addConnectRedirect"> It can be solved after adding 40029-invalid code The problem of （ In the test ）</param>
/// <returns></returns>
public static string GetAuthorizeUrl(string appId, string redirectUrl, string state, OAuthScope scope, string responseType = "code", bool addConnectRedirect = true)
{
    var url = string.Format("https://open.weixin.qq.com/connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type={2}&scope={3}&state={4}{5}#wechat_redirect",
                        appId.AsUrlData(), redirectUrl.AsUrlData(), responseType.AsUrlData(), scope.ToString("g").AsUrlData(), state.AsUrlData(), addConnectRedirect ? "&connect_redirect=1" : "");

    /*  After this step is sent , The customer will get the authorization page , Whether agree or refuse , Will return to redirectUrl page .
        *  If the user agrees to authorize , Page will jump to redirect_uri/?code=CODE&state=STATE. there code In exchange for access_token（ And universal interface access_token Not universal ）
        *  If the user forbids authorization , Will not be brought after redirection code Parameters , Will bring only state Parameters redirect_uri?state=STATE
        */
    return url;
}

The page opened in wechat developer tool ：

3.OAuthScope.snsapi_userinfo Method callback

This method is located in WeiXinMPSDK/Samples/MP/Senparc.Weixin.Sample.MP/Controllers/OAuth2Controller.cs In the document UserInfoCallback() Method ：

/// <summary>
/// OAuthScope.snsapi_userinfo Method callback 
/// </summary>
/// <param name="code"></param>
/// <param name="returnUrl"> The page the user first tried to enter </param>
/// <returns></returns>
public ActionResult UserInfoCallback(string code, string returnUrl)
{
    if (string.IsNullOrEmpty(code)) { return Content(" You declined authorization ！"); }

    OAuthAccessTokenResult result = null;
    // adopt , use code Exchange for access_token
    try
    {
        result = OAuthApi.GetAccessToken(appId, appSecret, code);
    }
    catch (Exception ex)
    {
        return Content(ex.Message);
    }
    if (result.errcode != ReturnCode. The request is successful )
    {
        return Content(" error ：" + result.errmsg);
    }

    // below 2 Data can also be encapsulated into a class by itself , Stored in a database （ It is recommended to combine caching ）
    // If safety can be ensured , Can be access_token Save in the user's cookie in , Everyone's access_token It's different 
    // HttpContext.Session.SetString("OAuthAccessTokenStartTime", SystemTime.Now.ToString());
    // HttpContext.Session.SetString("OAuthAccessToken", result.ToJson());

    // Because the first step is OAuthScope.snsapi_userinfo, Further user details can be obtained here 
    try
    {
        if (!string.IsNullOrEmpty(returnUrl)) { return Redirect(returnUrl); }

        OAuthUserInfo userInfo = OAuthApi.GetUserInfo(result.access_token, result.openid);
        return View(userInfo);
    }
    catch (ErrorJsonResultException ex)
    {
        return Content(ex.Message);
    }
}

The first is to get access_token, And then if returnUrl It's empty , Then return to the user information page . obtain access_token The code is OAuthApi.GetAccessToken(appId, appSecret, code);：

/// <summary>
///  obtain AccessToken（OAuth special ）
/// </summary>
/// <param name="appId"> The only sign of official account number </param>
/// <param name="secret"> Members of the public, appsecret</param>
/// <param name="code">code In exchange for a access_token The paper , Every time the user authorizes to bring code It will be different ,code Can only be used once ,5 Minutes are not used to expire automatically .</param>
/// <param name="grantType"> Fill in for authorization_code（ Please keep the default parameters ）</param>
/// <returns></returns>
public static OAuthAccessTokenResult GetAccessToken(string appId, string secret, string code, string grantType = "authorization_code")
{
    var url = string.Format(Config.ApiMpHost + "/sns/oauth2/access_token?appid={0}&secret={1}&code={2}&grant_type={3}", appId.AsUrlData(), secret.AsUrlData(), code.AsUrlData(), grantType.AsUrlData());
    return CommonJsonSend.Send<OAuthAccessTokenResult>(null, url, null, CommonJsonSendType.GET);
}

The code of the returned user information page is OAuthApi.GetUserInfo(result.access_token, result.openid)：

/// <summary>
///  Get basic user information 
/// </summary>
/// <param name="oauthAccessToken"> Call interface credentials （OAuth special ）</param>
/// <param name="openId"> Identification of ordinary users , The only official account is currently available. </param>
/// <param name="lang"> Return to country language version ,zh_CN  Simplified Chinese character ,zh_TW  traditional Chinese character ,en  English </param>
/// <returns></returns>
public static OAuthUserInfo GetUserInfo(string oauthAccessToken, string openId, Language lang = Language.zh_CN)
{
    var url = string.Format(Config.ApiMpHost + "/sns/userinfo?access_token={0}&openid={1}&lang={2}", oauthAccessToken.AsUrlData(), openId.AsUrlData(), lang.ToString("g").AsUrlData());
    return CommonJsonSend.Send<OAuthUserInfo>(null, url, null, CommonJsonSendType.GET);
}

When you click " Click here to test snsapi_userinfo" When linking ： The authorization page pops up , Click on " agree! " Button ：

4.OAuthScope.snsapi_base Method callback

This method is located in WeiXinMPSDK/Samples/MP/Senparc.Weixin.Sample.MP/Controllers/OAuth2Controller.cs In the document BaseCallback() Method ：

/// <summary>
/// OAuthScope.snsapi_base Method callback 
/// </summary>
/// <param name="code"></param>
/// <param name="returnUrl"> The page the user first tried to enter </param>
/// <returns></returns>
public ActionResult BaseCallback(string code, string returnUrl)
{
    try
    {
        if (string.IsNullOrEmpty(code)) { return Content(" You declined authorization ！"); }

        //  adopt , use code Exchange for access_token
        var result = OAuthApi.GetAccessToken(appId, appSecret, code);
        if (result.errcode != ReturnCode. The request is successful ) { return Content(" error ：" + result.errmsg); }

        // below 2 Data can also be encapsulated into a class by itself , Stored in a database （ It is recommended to combine caching ）
        // If safety can be ensured , Can be access_token Save in the user's cookie in , Everyone's access_token It's different 
        // HttpContext.Session.SetString("OAuthAccessTokenStartTime", SystemTime.Now.ToString());
        // HttpContext.Session.SetString("OAuthAccessToken", result.ToJson());

        // Because it's not sure whether users pay attention to benwechat , So I can only tentatively obtain 
        OAuthUserInfo userInfo = null;
        try
        {
            // Followed , You can get detailed information 
            userInfo = OAuthApi.GetUserInfo(result.access_token, result.openid);

            if (!string.IsNullOrEmpty(returnUrl))
            {
                return Redirect(returnUrl);
            }

            ViewData["ByBase"] = true;
            return View("UserInfoCallback", userInfo);
        }
        catch (ErrorJsonResultException ex)
        {
            // No attention , Authorization only , Unable to get details 
            // there ex.JsonResult May be ："{\"errcode\":40003,\"errmsg\":\"invalid openid\"}"
            return Content(" The user has authorized , to grant authorization Token：" + result, "text/html", Encoding.UTF8);
        }
    }
    catch (Exception ex)
    {
        WeixinTrace.SendCustomLog("BaseCallback An error occurred ", ex.ToString());
        return Content(" An error occurred ：" + ex.ToString());
    }
}

obtain access_token And user information OAuthScope.snsapi_userinfo The callback method is exactly the same , No more introduction . When you click " Click here to test snsapi_base" When linking ： so OAuthScope.snsapi_base Method callback is silent authorization , There is no need to display the pop-up authorization page .

reference ：
[1] Wechat web page authorization and access to user information ：https://juejin.cn/post/6844903648061816840
[2]wangfengyuan/wxAuthorize：https://github.com/wangfengyuan/wxAuthorize
[3] WeChat official account OAuth2.0 Web page authorization ：https://www.bilibili.com/video/BV1Vb411t7XR?p=1
[4] Web page authorization ：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
[5] Wechat public platform development -- Wechat authorized login （OAuth2.0）：https://www.cnblogs.com/0201zcr/p/5131602.html

Artificial intelligence dry goods recommendation Focus on technology sharing in the field of artificial intelligence

Game metauniverse Focus on technology sharing in the game field