angulaire.js - Une application monopage développée par Angular, comment implémenter correctement l'autorisation de page Web et appeler le SDK js dans WeChat

Question

Une page Web de lien externe d'un compte public WeChat a été transformée en une angularapplication d'une seule page à l'aide de Actuellement, nous rencontrons des problèmes avec l'autorisation de la page Web WeChat et l'appel du SDK js

.

---

Autorisation WeChat

Pour autant que je sache jusqu'à présent, après avoir appelé l'autorisation WeChat, l'URL d'entrée de l'application d'une seule page ressemblera à ceci (en supposant que le nom de domaine est : example.com) :

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

ou (avec html5 mode activé) ressemble à ceci :

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

?code=aaabbb, est renseigné lors de la redirection après l'autorisation WeChat. Ce n'est qu'avec cela que nous pouvons obtenir davantage d'informations sur l'utilisateur Voir les documents de développement WeChat >

Jusqu'à présent, il n'y aura aucun problème

Appelez js sdk

---

Comme le client Android WeChat ne prend pas en charge la nouvelle fonctionnalité H5 de pushState, l'url ② est abandonnée (test personnel, elle ne réussit pas la vérification), donc l'url d'entrée est comme ceci :

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

Voici maintenant le problème. S'il n'y a pas de

, il peut réussir la vérification de la signature, puis appeler avec succès le SDK js. Mais la situation réelle est la suivante : si une autorisation est requise, doit. exister et la vérification de la signature doit échouer. Alors comment rendre disponibles les appels d’autorisation et SDK ? ? ? ?code=aaabbb?code=aaabbb

Mes pensées et pratiques actuelles sont les suivantes : une fois que WeChat a autorisé la redirection vers

, obtenez le code, puis

. En faisant cela, nous pouvons obtenir les informations utilisateur et appeler le SDK avec succès, mais le problème est que chaque fois que nous entrons dans l'application, http://example.com?code=aaabbb/#/home sera actualisé deux fois location.href = http://example.com/#/home, ce qui rend l'expérience utilisateur extrêmement mauvaise, et je peux Je ne l'accepterai pas même si je souffre d'un trouble obsessionnel-compulsif.

S'il vous plaît, donnez-moi une solution fiable

Answer 1

Le front-end pur ne peut pas être implémenté. Vous pouvez uniquement configurer le nom de domaine de la page de rappel d'autorisation vers le serveur backend, puis le rediriger depuis le backend

Answer 2

Vous pouvez utiliser indexOf() pour obtenir la valeur du code

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)；

De cette façon, vous pouvez obtenir la valeur du code

Answer 3

Le front-end pur ne peut pas être implémenté. Il se trouve que j'ai récemment réalisé un projet similaire, qui utilisait également angulairejs et implémentait un programme d'une seule page via angulaire-route.js.

Appelez l'interface d'arrière-plan via ajax dans un programme d'une seule page (index.html),
En cas de succès, renvoyez : {status:true,...}
Si vous n'êtes pas connecté et échouez, renvoyez : {status:falst,next : 'login',errmsg :'Error'}
Autres erreurs renvoyées : {status:falst,next:'Prochaine opération',errmsg:'Error'}

Si le statut de retour result.status==false, result.next=='login':

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

Autorisez à accéder à wxlogin.php. Après avoir vérifié que la connexion est réussie, après avoir défini la SESSION, passez au programme d'une seule page (index.html)
Le programme continuera à appeler l'interface car vous êtes déjà connecté. , il renvoie : {status:true ,...}

Answer 4

L'affiche originale s'est retrouvée avec location.href=""?

Answer 5

Comment cela devrait-il être résolu ? L'auteur publiera la réponse pour le résoudre. Je vais également utiliser Vue pour développer WeChat

.