PC에서 QR 코드를 스캔하여 등록하고 로그인하십시오.
1. 서문
이 기사의 초점은 구현 아이디어에 중점을두고 있으며 코드 및 데이터베이스 디자인은 주로 아이디어를 보여주는 것입니다. 코드 효율에 대한 엄격한 요구 사항이있는 경우 복사하지 마십시오.
나는 WeChat 개발을 한 사람들이 많은 승인을했다고 생각하지만, 일반적으로 말하면, 우리는 모바일 웹 사이트를 더 승인하고 있거나 오히려 WeChat 터미널의 승인이라고 생각합니다. 오늘 제가 직면 한 한 가지 문제는 프로젝트가 WeChat 및 PC 터미널을 지원하고 등록을 개방한다는 것입니다. PC에 등록하든 WeChat쪽에 있든 다른 쪽 끝에 로그인해야합니다. 다시 말해, PC이든 WeChat이든, 당신은 "당신은 당신입니다"(어떤 방식으로 관련)해야합니다.
2. 해결책을 찾으십시오
전통적인 방식으로 생각하면 WeChat 측면은 승인을 통해 등록 될 수 있지만 PC 쪽에서는 전통적인 방법은 휴대 전화 번호 또는 이메일 등을 채우는 것 이상입니다.이 방법으로 등록하면 다음 문제가 발생합니다.
1. 먼저 WeChat 쪽의 등록을 승인하므로 PC쪽에 로그인하려면 여전히 등록해야합니다.
이 솔루션은 다음과 같습니다. WeChat 승인 등록 후 사용자가 휴대 전화 번호 및 이메일과 같은 기본 정보를 작성하도록 요구해야합니다. 이러한 방식으로 사용자가 어떤 방식으로 PC에 로그인 할 수 있도록 계정 비밀번호를 생성 할 수 있습니다. 예를 들어, 사용자의 별명을 계정으로 사용하고 휴대 전화 번호를 암호로 사용하십시오.
단점 : 사용자 경험은 좋지 않으며 안전 위험도 있습니다. 결국 WeChat 별명, 이메일 또는 휴대폰 번호가 노출됩니다.
2. PC에 먼저 등록하면 WeChat에서 승인 할 때 모바일 터미널에 어떻게 연결합니까? 물론 모든 문제에 대한 해결책이 항상있을 것입니다. 아이디어는 다음과 같습니다.
솔루션 1 : 사용자가 PC에 등록한 후 "Force"사용자는 WeChat 별명을 작성해야합니다. 이것은 WeChat 승인의 관련 조건으로 사용됩니다. 그러나 불행히도 WeChat 별명을 변경할 수 있지만, 유일한 것은 아닙니다. 어떻게 연결을 만드는 데 사용될 수 있습니까? 이 계획은 절망적 인 상황에서 살해되었습니다.
계획 2 : WeChat 측의 승인 및 PC 쪽의 등록 후 사용자는 휴대 전화 번호를 링크로 작성해야합니다. 이로 인해 문제가 발생하며 사용자의 휴대 전화의 진위를 보장해야하며 문제가 없습니다. 이는 휴대폰 확인 코드를 통해 달성 할 수 있습니다 (이메일도 마찬가지입니다). 그러나 다음 상황이 존재한다고 가정 할 수도 있습니다. 두 개의 휴대 전화 번호가있는 경우 PC에 등록 할 때 및 WeChat에 등록 할 때 하나를 작성하십시오. 관련이 있습니까? 대답은 동정입니다. 또한 PC에 등록한 후에는 그냥 채우지 못했습니다 (이중 인용문을 강요 한 이유). 그런 다음 WeChat 인증을 사용하여 로그인했습니다. 글쎄, 귀하가 연결할 수있는 방법을 찾기 위해 기다리는 두 가지 데이터가있을 것입니다. 전형적인 개발자가 구멍을 뚫을 것입니다. 이 방법은 어느 정도 작동하지만 개발자가 엄격하게 받아 들일 수 없습니다.
3. 원산지로 돌아가는 해결책
분석 : 위의 솔루션에는 모든 문제가 있으므로 먼저 제쳐 놓으십시오. 문제의 근원에 몇 가지 생각을 다시 넣으십시오. 관련 문제에는 고유 식별자가 필요합니다. 고유 한 식별은 우리의 ID 번호와 같습니다. 신용 카드를 신청하면 ID 카드가 필요합니다. 실제 이름 시스템에서 숫자 카드를 구매하는 경우 ID 카드가 필요합니다. 우리가 시스템 관리자라고 가정하면 ID 번호를 통해 휴대 전화 번호와 은행 카드 번호를 찾을 수 있습니다.
위의 아이디어를 통해 우리가해야 할 일은 고유 한 식별자를 찾는 것입니다. WeChat에는 중요한 역할이 있습니다. 위에서 언급 한 ID 번호, WeChat 계정의 특정 공식 계정의 고유 식별 인이 공통 기능이 있습니다.
WeChat의 승인은 OpenID에게 제공됩니다. WeChat 개발을 한 사람은 아무런 문제가 없어야합니다. 문제는 등록하거나 로그인 할 때 OpenID를 얻기 위해 PC 터미널을 달성하는 방법입니다. 저자의 구현 아이디어는 다음과 같습니다. PC에 등록하거나 로그인 할 때 QR 코드를 표시하고 사용자가 WeChat을 사용하여 코드를 스캔하도록 안내하여 인증 페이지로 이동하십시오. 이 단계는 가장 중요한 세부 사항이 있습니다. QR 코드에 고유 인증 코드 (AuthCode)를 가져 오십시오. 사용자가 우리가 OpenID를 작성하고 데이터베이스에 인증을 허용하는지 상상해보십시오. 그런 다음 PC 쪽의 API를 통해 Authcode와 관련된 OpenID를 얻을 수 있습니다. 이렇게하면 현재 코드를 스캔하고 PC에 등록하거나 로그인하는 사람을 알 수 있습니다 (등록되지 않은 경우 등록하고 등록 된 사람은 직접 로그인합니다). 갑자기 너무 쉬워요? 텍스트가 더 추상적이라고 생각되면 다음 사진을 참조하십시오.
PC Wechat 스캔 코드 로그인 프로세스
핵심 코드
아이디어와 프로세스를 명확히 한 후 코드를 직접 업로드합니다. 개발 아이디어는 일반적이므로 언어를 개발할 때 마법의 힘을 보여주십시오.
참고 : 다음 코드는 C# 언어를 예로 들어 MVC + EF를 사용합니다 (참고 : UUID는 위의 Authcode와 동일합니다).
배경 페이지에 로그인하려면 코드를 스캔합니다.
public actionResult login () {// 로그인 된 경우 홈페이지로 직접 이동하면 (user.identity.isauthenticated) retirecttoaction ( "index", "home"); 문자열 URL = request.url.host; 문자열 uuid = guid.newguid (). toString (); viewbag.url = "http : //" + url + "/home/loginfor? uuid =" + uuid; // 구성 권한 부여 링크 viewbag.uuid = uuid; // uuid return view ();} 저장
QR 코드는 플러그인 jQuery.qrcode.js를 사용하여 생성됩니다. 더 알고 싶다면 Github로 이동하십시오. 여기에 주목해야 할 것은이 플러그인이 QR 코드, 캔버스 또는 테이블의 생성 방법을 지정할 수 있다는 것입니다. IE를 지원하는 친구에게 테이블 생성 사용을 지정하십시오.
코드는 다음과 같습니다.
jQuery ( '#qrcode'). qrcode ({render : "table", 텍스트 : "http://baidu.com"});주제로 돌아가서 로그인 페이지의 기본 코드는 다음과 같습니다.
<!-QR 코드 div-> <div id = "QRCode-Container"> </div> <script src = "~/jquery/jquery-1.9.1.min.js"> </script> <script src = "~/jquery-qrcode/jquery.qrcode.min.js> jQuery (function () {// QR 코드 생성 jQrery ( '#qrcode-container'). qrcode ( "@viewbag.url"); // poling은 사용자가 var interval = setInterval (function () { "@url.action ("userLogin ","home ")", "@uid", "" "," "<@UID" (데이터) { "성공"{// 사용자 성공 허가 if ( "성공"{window.location.href = 'index ","home});
사용자가 API 코드를 승인하는지 여부를 결정하기위한 설문 조사
public string userLogin (String UUID) {// 매개 변수가 합법적인지 확인 if (string.isnullorEmpty (uuid)) RETURN "PARAM_ERROR"; wx_userrecord user = db.wx_userrecord.where (u => u.uuid == uuid) .firstordefault (); if (user == null) "not_authcode"를 반환합니다. // 쿠키 작성 formsauthentication.setauthCookie (user.openid, false); // UUID user.UUID = NULL; db.sevechanges (); "성공"반환;}WeChat 승인 조치
public actionResult loginfor (String UUID) {#region 기본 정보 가져 오기 -SNSAPI_USERINFO / * * WECHAT GENERAL CLASE 생성 - 여기에 코드가 더 복잡하고 여기에 게시되지 않았습니다. // WeChat General Class를 사용하여 기본 사용자 정보를 얻습니다 wxContext.getUserInfo (); if (! string.isnullorEmpty (wxContext.openid)) {uuid = request [ "state"]; // 데이터베이스가 존재하는지 여부를 판단합니다 WX_USERRECORD 사용자 = DB.WX_USERECORD.Where (u => u.openid == wxContext.opEnid) .firstordEfault (); if (null == user) {user = new WX_USERCORD (); user.openid = wxcontext.openid; user.city = wxcontext.city; user.country = wxcontext.country; user.createtime = dateTime.now; user.headimgurl = wxcontext.headimgurl; user.nickname = wxContext.nickName; user.province = wxcontext.province; user.sex = wxcontext.sex; user.unionid = wxcontext.unionid; user.uuid = uuid; db.wx_userrecord.add (사용자); } user.uuid = uuid; db.sevechanges (); } #endregion return view ();}
마지막으로 데이터베이스 테이블 디자인이 첨부됩니다
특별한 것은 없습니다. 우리는 WeChat에서 반환 한 각 매개 변수에 대해 하나 이상의 사용자 정의 UUID를 추가합니다.
WeChat 매개 변수 설명에 대한 자세한 내용은 WeChat 개발자 문서를 참조하십시오.
실행 효과
1. QR 코드를 스캔하여 페이지에 로그인합니다.
2. 사용자 승인을 요청하십시오
3. 사용자는 승인을 확인합니다
4. PC 로그인이 완료되었습니다
기사에는 필연적으로 단점이 있습니다. 용서 해주세요. 오류가 발생하면 메시지를 남겨 두십시오. 정말 감사합니다! WeChat에서 QR 코드를 스캔하여 등록하고 데모에 로그인하십시오. 저자가 정리 한 후 Github에 넣으십시오. 더 많은 친구들을 돕기를 바랍니다. 이 기사의 업데이트에주의하십시오.
위는 PC의 WeChat에서 QR 코드를 스캔하는 예입니다. 도움이 필요한 친구들이 그것을 언급 할 수 있습니다. 이 사이트를 지원 해주셔서 감사합니다!