angular.js - Angular에서 개발한 단일 페이지 애플리케이션, 웹 페이지 인증을 올바르게 구현하고 WeChat에서 js SDK를 호출하는 방법

Question

WeChat 공개 계정의 외부 링크 웹페이지를 angular을 사용하여 단일 페이지 애플리케이션으로 만들었습니다. 현재 WeChat 웹페이지 승인 및 js SDK 호출에 문제가 있습니다

.

---

위챗 인증

지금까지 내가 아는 한, WeChat 인증을 호출한 후 단일 페이지 애플리케이션의 입구 URL은 다음과 같습니다(도메인 이름이 example.com이라고 가정):

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

또는 (html5 mode 활성화 시) 다음과 같습니다.

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

?code=aaabbb은 WeChat 인증 후 리디렉션 시 입력됩니다. 이를 통해 WeChat 개발 문서 > 코드 가져오기

를 참조하세요.

현재까지는 문제가 없을 것입니다

---

js SDK 호출

안드로이드 위챗 클라이언트는 pushState의 새로운 H5 기능을 지원하지 않기 때문에 URL ②는 버려지므로(개인 테스트, 검증을 통과하지 못함) 입구 URL은 다음과 같습니다.

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

이제 문제가 발생합니다. ?code=aaabbb이 없으면 서명 확인을 통과한 다음 js SDK를 성공적으로 호출할 수 있습니다. 그러나 실제 상황은 인증이 필요한 경우 ?code=aaabbb입니다. 존재하며 서명 확인이 실패해야 합니다. 그렇다면 승인 및 SDK 호출을 사용 가능하게 만드는 방법은 무엇입니까? ? ?

현재 내 생각과 관행은 다음과 같습니다. WeChat에서 http://example.com?code=aaabbb/#/home으로의 리디렉션을 승인한 후 코드를 얻은 다음 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도 개발할 예정입니다