angular.js - Angular开发的单页面应用，如何正确地实现在微信里的网页授权和调用js sdk

Question

一个微信公众号的外链网页，使用angular做成了单页应用，目前碰到了 微信网页授权 和 调用 js sdk 的问题

---

微信授权

据我所目前所知，调用了微信授权后，单页应用的入口 url 会长成这样（假定域名为:example.com）：

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

或者(启用了html5 mode) 长成这样：

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

?code=aaabbb, 是微信授权后重定向时填充的，有了这个才能进一步去获取用户信息，参见 微信开发文档 > 获取code

至此，还不会出现问题

---

调用 js sdk

由于Android微信客户端不支持pushState的H5新特性，url②废弃(亲测，确实不能通过验证)，所以入口url是这样：

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

现在问题来了，如果没有?code=aaabbb就能通过签名验证, 然后成功调用 js sdk，但实际情况是：如果需要授权?code=aaabbb必然存在，签名验证必定失败。那么到底如何做到授权和调用sdk均可用？？？

我目前的想法和做法是：微信授权重定向到http://example.com?code=aaabbb/#/home后，拿到code，然后再location.href = http://example.com/#/home。这样做是能拿到用户信息，并且成功调用sdk，但问题是每次进入应用，会刷新两次,这样用户体验极差，而且有强迫症的我也接受不了。

请教各位给个靠谱的方案

---

Answer 1

순수한 프런트엔드는 구현할 수 없습니다. 인증 콜백 페이지의 도메인 이름을 백엔드 서버로 구성한 다음 백엔드에서 리디렉션할 수만 있습니다.

Answer 2

indexOf()를 사용하여 코드 값을 얻을 수 있습니다

으아아아

이 방법으로 코드 값을 얻을 수 있습니다

Answer 3

순수한 프런트 엔드는 구현할 수 없습니다. 최근에 비슷한 프로젝트를 수행했는데, 이 프로젝트에서도 역시AngularJS를 사용하고Angular-route.js를 통해 단일 페이지 프로그램을 구현했습니다.

단일 페이지 프로그램(index.html)에서 ajax를 통해 백그라운드 인터페이스를 호출하고,
성공하면 {status:true,...}를 반환합니다.
로그인하지 않고 실패하면 {status:falst,next:를 반환합니다. 'login',errmsg :'Error'}
반환된 기타 오류: {status:falst,next:'Next Operation',errmsg:'Error'}

반환 상태가 result.status==false인 경우 result.next=='login':

으아악

wxlogin.php로 점프하도록 권한을 부여하세요. 로그인 성공을 확인한 후 SESSION을 설정한 후 단일 페이지 프로그램(index.html)으로 점프하세요.
프로그램은 이미 로그인되어 있기 때문에 계속해서 인터페이스를 호출합니다. , 반환: {status:true ,...}

Answer 4

원래 포스터는 location.href=""?

로 끝났습니다.

Answer 5

이 문제를 어떻게 해결해야 할까요? 작성자가 해결 방법을 게시할 예정입니다. 저는 Vue를 사용하여 WeChat도 개발할 예정입니다