angular.js - A single-page application developed by Angular, how to correctly implement web page authorization and call js sdk in WeChat

Question

An external link webpage of a WeChat public account was made into a angularsingle-page application using . Currently, we are encountering problems with WeChat webpage authorization and calling js sdk

---

WeChat Authorization

As far as I know so far, after calling WeChat authorization, the entrance URL of the single-page application will look like this (assuming the domain name is: example.com):

• ①http://example.com?code=aaabbb/#/home

or (with html5 mode enabled) looks like this:

• ②http://example.com/home?code=aaabbb

?code=aaabbb, is filled in when redirecting after WeChat authorization. With this, we can further obtain user information. See WeChat Development Documentation > Get code

So far, there will be no problems

---

Call js sdk

Since the Android WeChat client does not support the new H5 feature of pushState, url ② is abandoned (personal test, it does not pass verification), so the entrance url is like this:

• http://example.com?code=aaabbb/#/home

Now here comes the problem. If there is no ?code=aaabbb, it can pass the signature verification, and then successfully call the js sdk. But the actual situation is: if authorization is required, ?code=aaabbb must exist, and the signature verification must fail. So how to make authorization and SDK calls available? ? ?

My current thoughts and practices are: After WeChat authorizes redirection to http://example.com?code=aaabbb/#/home, get the code, and then location.href = http://example.com/#/home. By doing this, we can get the user information and call the SDK successfully, but the problem is that every time we enter the application, will be refreshed twice , which makes the user experience extremely poor, and I can't accept it even if I have obsessive-compulsive disorder.

Please give me a reliable solution

---

Answer 1

Pure front-end cannot be implemented. You can only configure the domain name of the authorization callback page to the backend server, and then redirect it from the backend

Answer 2

You can use indexOf() to get the code value

var url  = 'http://example.com?code=aaabbb/#/home';
var n = url.indexOf('code=')+5;
var m = url.indexOf('/#');
var code = url.substr(n, m-1)；

This way you can get the code value

Answer 3

Pure front-end cannot be implemented. It just so happens that I have recently done a similar project, which also used angularjs and implemented a single-page program through angular-route.js.

Call the background interface through ajax in a single page program (index.html),
If successful, return: {status:true,...}
If not logged in and fail, return: {status:falst,next:'login',errmsg :'Error'}
Other errors returned: {status:falst,next:'Next operation',errmsg:'Error'}

If the return status result.status==false, result.next=='login':

case "login":
    $http.get($api.callback($api.login)).success(function(val){
        //通过后台返回 授权地址
        location.href = val.loginUrl;
    });
    return;

Authorize to jump to wxlogin.php. After verifying that the login is successful, after setting the SESSION, jump to the single-page program (index.html)
The program will continue to call the interface. Because you have already logged in, it returns: {status:true ,...}

Answer 4

The original poster ended up with location.href=""?

Answer 5

How should this be solved? The author will post the answer to solve it. I am going to use Vue to develop WeChat too