本文將介紹基於Senparc.Weixin微信開發框架來實現網頁授權來獲取用戶基本信息。先生成包含授權及回調url信息的二維碼;用戶用微信掃描之后,被要求授權以獲取Ta的用戶基本信息;用戶授權后,通過回調url頁面獲取並顯示用戶的基本信息;在這個頁面上加一個按鈕,點點擊按鈕后,把用戶的基本信息保存到數據庫。
下面介紹詳細的步驟:
1. 生成二維碼
下面這個url是一個授權頁面,包含了回調的url參數redirect_uri:
注意,要把appid和redirect_url換成你自己的
打開 http://cli.im/url ,輸入上面的url,生成二維碼圖片
2. 新建一個二維碼的頁面
<form id="form1" runat="server">
<div style="align-content:center;align-items:center">
<h2>OAuth2.0授權測試</h2>
<img src="../Images/QrCode.png" height="190" width="190" alt="" />
</div>
</form>
把上面生成的二維碼圖片放到頁面上。
3. 新建上面提到的回調頁面:
前台:
<form id="form1" type="post" runat="server">
<div>
<p>下面是通過授權得到的您的部分個人信息:</p>
<p>
nickname:
<label>
<%=(ViewState["WeixinUserInfo"] as Youda.ViewEntity.UserInfoEntity).NickName%></label>
</p>
<p>
country:
<%=(ViewState["WeixinUserInfo"] as Youda.ViewEntity.UserInfoEntity).Country %>
</p>
<p>
province:
<%=(ViewState["WeixinUserInfo"] as Youda.ViewEntity.UserInfoEntity).Province %>
</p>
<p>
city:
<%= (ViewState["WeixinUserInfo"] as Youda.ViewEntity.UserInfoEntity).City %>
</p>
<p>
sex:
<%= (ViewState["WeixinUserInfo"] as Youda.ViewEntity.UserInfoEntity).Sex %>
</p>
<p>
頭像(直接調用可能看不到,需要抓取):<br />
<img src="<%=(ViewState["WeixinUserInfo"] as Youda.ViewEntity.UserInfoEntity).HeadImgUrl %>" />
</p>
<p>
<input style="height:50px;width:90px" type="submit" data-theme="b" value="點贊" id="bsubmit" rel="external" />
</p>
</div>
</form>
注意這里的type一定要設成post: <form id="form1" type="post" runat="server"> , 不然頁面會多次被調用,以至於下面的用code取access_token時,報40029 invalid code的錯誤。因為第一次取完之后,立馬再去取就會報40029的錯誤。
后台:
private string appId = ConfigurationManager.AppSettings["appID"];
private string appSecret = ConfigurationManager.AppSettings["appSecret"];
ILog log = LogManager.GetLogger(MethodBase.GetCurrentMethod().DeclaringType);
protected void Page_Load(object sender, EventArgs e)
{
log.Info(Request.HttpMethod);
if (Page.IsPostBack)
{
try
{
if (ViewState["WeixinUserInfo"] == null) Response.End();
var userInfo = ViewState["WeixinUserInfo"] as UserInfoEntity;
log.Info(userInfo.NickName);
new UserInfoBll().Create(userInfo);
Response.Write("保存成功");
Response.End();
}
catch (Exception ex)
{
log.Error(ex.Message, ex);
Response.End();
}
}
else
{
if (ViewState["WeixinUserInfo"] == null)
{
log.Info(Request.Url);
string code = Request["code"];
if (string.IsNullOrEmpty(code))
{
Response.Write("您拒絕了授權!");
Response.End();
}
log.Info(code);
OAuthAccessTokenResult result = null;
//通過,用code換取access_token
try
{
result = result = OAuthApi.GetAccessToken(appId, appSecret, code);
}
catch (ErrorJsonResultException jex)
{
log.Error(jex.Message, jex);
Response.Write("0 " + " , error: " + jex.Message);
Response.End();
}
catch (Exception ex)
{
log.Error(ex.Message, ex);
Response.Write("1 " + " code: " + code + " , error: " + ex.Message);
Response.End();
}
if (result.errcode != ReturnCode.請求成功)
{
Response.Write("2 " + result.errmsg);
Response.End();
}
//下面2個數據也可以自己封裝成一個類,儲存在數據庫中(建議結合緩存)
//如果可以確保安全,可以將access_token存入用戶的cookie中,每一個人的access_token是不一樣的
//Session["OAuthAccessTokenStartTime"] = DateTime.Now;
//Session["OAuthAccessToken"] = result;
//因為第一步選擇的是OAuthScope.snsapi_userinfo,這里可以進一步獲取用戶詳細信息
try
{
OAuthUserInfo userInfo = OAuthApi.GetUserInfo(result.access_token, result.openid);
var user = new UserInfoEntity()
{
City = userInfo.city,
Province = userInfo.province,
Country = userInfo.country,
HeadImgUrl = userInfo.headimgurl,
//Language = userInfo.language,
//Subscribe_time = userInfo.subscribe_time,
Sex = (Sex)userInfo.sex,
NickName = userInfo.nickname,
OpenId = userInfo.openid
};
log.Info(user.NickName);
ViewState["WeixinUserInfo"] = user;
//Response.Write(ViewState["WeixinUserInfo"]);
//Response.End();
}
catch (ErrorJsonResultException ex)
{
log.Error(ex.Message, ex);
Response.Write("3 " + ex.Message);
Response.End();
}
}
}
}
1) 根據回調url上的code取access_token
result = OAuthApi.GetAccessToken(appId, appSecret, code);
2) 根據access_token取用戶信息
OAuthUserInfo userInfo = OAuthApi.GetUserInfo(result.access_token, result.openid);
3)在頁面上顯示用戶信息
var user = new UserInfoEntity()
{
City = userInfo.city,
Province = userInfo.province,
Country = userInfo.country,
HeadImgUrl = userInfo.headimgurl,
Sex = (Sex)userInfo.sex,
NickName = userInfo.nickname,
OpenId = userInfo.openid
};
ViewState["WeixinUserInfo"] = user;
注意顯示到頁面上的實體一定要記得序列化,否則顯示不出來:
[Serializable]
public class UserInfoEntity : IViewModel<UserInfoEntity, UserInfo>
4) 當點擊頁面上的 點贊按鈕后,保存用戶的信息
if (Page.IsPostBack)
{
var userInfo = ViewState["WeixinUserInfo"] as UserInfoEntity;
log.Info(userInfo.NickName);
new UserInfoBll().Insert(userInfo);
Response.Write("保存成功");
Response.End();
}
數據訪問框架層(ORM)采用了.NET平台的Entity Framework來實現;實體數據的轉換使用開源的Object-Object Mapping工具Automapper。
4. 下載源碼
http://yunpan.cn/cjapF4dFvngiu 訪問密碼 ca16
使用源碼前,要先創建數據庫(ORM/db.sql),修改config文件(里面是xxxx的)