Problems using Wechat auth

Question

I recently tried to use Wechat authentication for my hybrid mobile app (built with Ionic Framework) but haven't had much success. I signed up for a developer account and obtained an AppId and AppKey. I then fired off the request, and was redirected to my native Wechat app, but reached a page with an error message "Oops! Something went wrong". I also tried firing a get request via Postman like:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=yy8f70a5c5a0971111&secret=99999ed33fe7c954bc672630afb7xxxx

but received an error:

{ "errcode": 50001, "errmsg": "user unauthorized" }

Would anyone have an idea? Thanks!

By the way, this is the Wechat plugin that I'm using:

https://github.com/xu-li/cordova-plugin-wechat-example

Solution 1

This often happens because you don't have the correct oauth set up on your wechat account.

On the side panel click on Develop/Interface Permisions 开发/接口权限, then look for Account page/Authorized users obtain basic information page and click on modify 网页服务/网页授权获取用户基本信息/ click on 修改. Make sure to put the url you are using for the app in the Authorization callback page Name/授权回调页面域名: field.

Note that this will not work for an ip address or localhost, so you might want to download https://ngrok.com/ and use the proxy tunnel as the authorization callback for development.

Also note that Wechat's auth will only work within its own browser.

Solution 2

I use Ionic and that plugin too, and they work fine:

• Android: https://play.google.com/store/apps/details?id=com.diankeda.huaquanquan

The online version needs to be QR code scanned, while in iOS or android, the wechat client would be invoked.

From what you've provided I infer the problems are:

• You didn't call Wechat.auth() before you try to get the wechat user info
• You didn't use https://api.weixin.qq.com/sns/oauth2/access_token, instead you were using another url

I attached my main working code below. The most important thing is call Wechat.auth() before other staff, which I didn't see in your code. The Wechat object is provided by that plugin and will do the authorization and return a code. And with that code we can do next things.

var scope = "snsapi_userinfo";
Wechat.auth(scope, function(response) {
  // Here we got authorized, now we can get more user info by passing the code returned by the authorized response code
  if (response && response.code) {
    OAuthService.weixin.getNativeUserInfoByCode(response.code, wechatSignIn);
  } else {
    // If we don't get the code so we show an alert
    DialogsService.alert('获取微信授权代码失败。' + JSON.stringify(response), '微信授权失败');
  }
}, function(reason) {
  console.error(reason);
  console.error('微信认证失败');
  DialogsService.alert(reason, '微信认证失败');
});

The code for OAuthService.weixin.getNativeUserInfoByCode() to get the user info looks like this:

$http({
    method: 'POST',
    url: 'https://api.weixin.qq.com/sns/oauth2/access_token?appid={1}&secret={2}&grant_type=authorization_code&redirect_uri={3}&code={the code we got from Wechat.auth()}'
  })
  .success(function(data) {
    if (data.errcode || data.errmsg) {
      console.log('getting weixin access_token fail. data = ');
      console.log(JSON.stringify(data));
      console.log('换取 access_token 的 code 为 "' + code + '"');
      errorCallback(data);
      return;
    }

    console.log('getting weixin access token success. data =');
    console.log(JSON.stringify(data));

    var access_token = data.access_token;
    var openid = data.openid;
    successCallback(access_token, openid);
  })
  .error(function(data) {
    console.log('getting weixin access_token fail. data = ');
    console.log(JSON.stringify(data));

    errorCallback(data);
  });

Comments

[The Jeff]

This issue affects me as well.