時(shí)間：2023-11-23 03:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-11-23 03:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
請(qǐng)問如何微信掃碼登錄網(wǎng)站同時(shí)關(guān)注公眾號(hào)？：我的（文章）很長(zhǎng)，你忍一下?
本文通過(guò)一個(gè)實(shí)際的具有一定商業(yè)價(jià)值的項(xiàng)目，展示了 API 優(yōu)先的開發(fā)方法。通過(guò)薅羊毛的方式，落地了 Free Arch 架構(gòu)。
在線咨詢
openapi: "3.0.0"info: version: 0.0.1 title: Authenticate with Wechat MP!servers: # Added by API Auto Mocking Plugin - description: SwaggerHub API Auto Mocking url: https://virtserver.swaggerhub.com/UniHeart/wechat-mp/0.0.1 - url: http://localhost:8080paths: /mp-qr: get: summary: Gets a temporary qr code with parameter operationId: mp-qr-url tags: - mp-qr responses: '200': description: Got the temporary qr code image link content: application/json: schema: $ref: '#/components/schemas/MpQR' example: expire_seconds: 60 imageUrl: https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQGT7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAycnE3QWw3b3JmazMxb2FMQnh3Y1UAAgTOrmVgAwQ8AAAA sceneId: 66afab27-c8fa-417d-a28a-95d5a977e1d3 ticket: gQGT7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAycnE3QWw3b3JmazMxb2FMQnh3Y1UAAgTOrmVgAwQ8AAAA url: http://weixin.qq.com/q/02rq7Al7orfk31oaLBxwc /mp-qr-scan-status: get: summary: Get the scanning status of qr code operationId: mp-qr-scan-status tags: - mp-qr parameters: - in: query name: ticket required: true description: the ticket for the qr code to query scanning status schema: type: string example: gQE48DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyb2U4U2wwb3JmazMxcS1kQ3h3YzgAAgSCjWZgAwQ8AAAA responses: '200': description: The scanning stqtus of qr code content: application/json: schema: $ref: '#/components/schemas/MpQRScanStatus' example: openId: oWFvUw5ryWycy8XoDCy1pV0SiB58 status: SCANNED /mp-message: post: summary: Receive xml messages sent from wechat mp server operationId: mp-message tags: - mp-qr requestBody: description: wechat mp messages in xml format required: true content: application/xml: schema: $ref: '#/components/schemas/xml' responses: '200': description: the message was well receivedcomponents: schemas: MpQR: type: object properties: expire_seconds: type: integer format: int64 example: 60 imageUrl: type: string example: https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQGT7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAycnE3QWw3b3JmazMxb2FMQnh3Y1UAAgTOrmVgAwQ8AAAA sceneId: type: string example: 66afab27-c8fa-417d-a28a-95d5a977e1d3 ticket: type: string example: gQGT7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAycnE3QWw3b3JmazMxb2FMQnh3Y1UAAgTOrmVgAwQ8AAAA url: type: string example: http://weixin.qq.com/q/02rq7Al7orfk31oaLBxwc MpQRScanStatus: type: object properties: openId: type: string example: oWFvUw5ryWycy8XoDCy1pV0SiB58 status: type: string example: SCANNED xml: type: object properties: ToUserName: type: string example: oWfv FromUserName: type: string example: 1234 CreateTime: type: number example: 1357290913 MsgType: type: string example: Text Event: type: string example: subscribe EventKey: type: string example: qrscene_123123 Ticket: type: string example: TICKET?build.gradle 文件中，增加一些依賴，主要有build.gradle 文件里添加一個(gè)任務(wù)，用來(lái)根據(jù)最新的 Swagger 文檔生成相關(guān)的類型代碼等： ?// generates the spring controller interfaces from openapi spec in src/main/resources/service.yamlopenApiGenerate { generatorName = "spring" inputSpec = "$projectDir/swagger-output/swagger.yaml" outputDir = "$buildDir/generated" apiPackage = "com.uniheart.wechatmpservice.api" invokerPackage = "com.uniheart.wechatmpservice" modelPackage = "com.uniheart.wechatmpservice.models" configOptions = [ dateLibrary: "java8", interfaceOnly: "true", ]}這樣每次文檔有更新，就只需要在項(xiàng)目目錄下跑一下命令： ?./gradlew openApiGenerate注意，我們采用了 Swagger Hub 來(lái)更新 API 文檔，它有個(gè) Sync 功能，可以在每次文檔改動(dòng)后點(diǎn)擊一下，就會(huì)自動(dòng)提交一個(gè)改動(dòng)推送到你的 git 倉(cāng)庫(kù)。 ?WebSecurityConfig 里完成，主要代碼如下： ?package com.uniheart.securing.web.wechat.mp;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.http.HttpMethod;import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;import org.springframework.security.config.annotation.web.builders.HttpSecurity;import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;import org.springframework.security.core.userdetails.User;import org.springframework.security.core.userdetails.UserDetails;import org.springframework.security.core.userdetails.UserDetailsService;import org.springframework.security.provisioning.InMemoryUserDetailsManager;@Configuration@EnableWebSecuritypublic class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/", "/home").permitAll() .antMatchers("/mp-qr", "/mp-qr").permitAll() .antMatchers("/mp-qr-scan-status", "/mp-qr-scan-status").permitAll() .antMatchers(HttpMethod.POST, "/mp-message").permitAll() .antMatchers("/v3/api-docs", "/v3/api-docs").permitAll() .antMatchers("/swagger-ui", "/swagger-ui").permitAll() .anyRequest().authenticated() .and() .formLogin() .loginPage("/login") .permitAll() .and() .logout() .permitAll(); http.csrf().disable(); }}Controller 去實(shí)現(xiàn)預(yù)先定義好的 MpQrApi 即可： ?package com.uniheart.securing.web.wechat.mp;import com.uniheart.securing.web.wechat.mp.services.MpServiceBean;import com.uniheart.wechatmpservice.api.MpQrApi;import com.uniheart.wechatmpservice.models.MpQR;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.web.bind.annotation.RestController;@RestControllerpublic final class WechatMpApiController implements MpQrApi { @Autowired private MpServiceBean mpServiceBean; @Override public ResponseEntity<MpQR> mpQrUrl() { return new ResponseEntity<>(this.mpServiceBean.getMpQrCode(), HttpStatus.OK); }}可見核心業(yè)務(wù)邏輯在 MpServiceBean 中，代碼如下： ?package com.uniheart.securing.web.wechat.mp.services;import com.google.gson.Gson;import com.google.gson.JsonObject;import com.uniheart.securing.web.wechat.mp.Constants;import com.uniheart.wechatmpservice.models.MpQR;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Component;import java.net.URI;import java.net.http.HttpClient;import java.net.http.HttpRequest;import java.net.http.HttpResponse;import java.util.UnknownFormatConversionException;@Componentpublic class MpServiceBean { private final HttpClient httpClient; @Value("${weixin-qr-code-creation-endpoint:default-test-value}") private String qrCodeCreateUrl; @Value("${weixin-token-endpoint:default-test-value}") private String weixinAccessTokenEndpoint; public String getQrCodeCreateUrl() { return this.qrCodeCreateUrl; } public MpServiceBean() { this.httpClient = HttpClient.newHttpClient(); } public MpServiceBean(HttpClient client, String qrCodeCreateUrl, String tokenEndpoint) { this.httpClient = client; this.qrCodeCreateUrl = qrCodeCreateUrl; this.weixinAccessTokenEndpoint = tokenEndpoint; } public void setQrCodeCreateUrl(String url) { this.qrCodeCreateUrl = url; } public void setWeixinAccessTokenEndpoint(String url) { this.weixinAccessTokenEndpoint = url; } Logger logger = LoggerFactory.getLogger(MpServiceBean.class); public MpQR getMpQrCode() { var mpTokenManager = new MpTokenManager(this.weixinAccessTokenEndpoint); URI uri = URI.create(this.qrCodeCreateUrl + mpTokenManager.getAccessToken().accessToken); logger.info("Getting qr code with " + uri); var payload = WeixinQrCodeRequestPayload.getRandomInstance(); HttpRequest request = HttpRequest.newBuilder().POST(HttpRequest.BodyPublishers.ofString(payload.toJson())).uri(uri).build(); try { HttpResponse<String> response = this.httpClient.send(request, HttpResponse.BodyHandlers.ofString()); WeixinErrorResponse errorResponse = new Gson().fromJson(response.body(), WeixinErrorResponse.class); WeixinTicketResponse ticketResponse = new Gson().fromJson(response.body(), WeixinTicketResponse.class); if (ticketResponse.ticket != null) { return new MpQR().ticket(ticketResponse.ticket).imageUrl(ticketResponse.url).expireSeconds(ticketResponse.expiresInSeconds).url(ticketResponse.url).sceneId(String.valueOf(payload.action_info.scene.scene_id)); } if (errorResponse.errcode == (40001)) { return new MpQR().ticket("test").imageUrl(Constants.FALLBACK_QR_URL); } throw new UnknownFormatConversionException(response.body()); } catch (InterruptedException ie) { System.err.println("Exception = " + ie); ie.printStackTrace(); return new MpQR().ticket("interrupted").imageUrl(Constants.FALLBACK_QR_URL); } catch (Exception ex) { System.err.println("Exception = " + ex); ex.printStackTrace(); return new MpQR().ticket("error").imageUrl(Constants.FALLBACK_QR_URL); } }}?WeixinQrCodeRequestPayload.getRandomInstance()，會(huì)生成場(chǎng)景值。場(chǎng)景值以及帶參二維碼，因?yàn)槊總€(gè)登錄請(qǐng)求嘗試都是獨(dú)立發(fā)生的， 所以應(yīng)該是全局唯一；為了防止惡意者攻擊，這個(gè)場(chǎng)景值應(yīng)該具有不可猜性。前面介紹其可以使用 UUID 來(lái)滿足這兩點(diǎn)，參見《基于 keycloak 的關(guān)注公眾號(hào)即登錄功能的設(shè)計(jì)與實(shí)現(xiàn)》的具體實(shí)現(xiàn)，這里給出一種簡(jiǎn)便的實(shí)現(xiàn)，即根據(jù)當(dāng)前時(shí)間來(lái)計(jì)算出一個(gè)場(chǎng)景值，由于精確到納秒，所以很難重復(fù)。 ?package com.uniheart.securing.web.wechat.mp.services;import com.google.gson.Gson;import com.uniheart.securing.web.wechat.mp.Now;import org.joda.time.Instant;public class WeixinQrCodeRequestPayload { public String action_name; public ActionInfo action_info; public int expire_seconds; public String toJson() { return new Gson().toJson(this); } public static WeixinQrCodeRequestPayload getRandomInstance() { var timestamp = Now.instant(); var ret = new WeixinQrCodeRequestPayload(); ret.action_name = "QR_SCENE"; ret.expire_seconds = 604800; ret.action_info = new ActionInfo(); ret.action_info.scene = new Scene(); ret.action_info.scene.scene_id = timestamp.getEpochSecond() + timestamp.getNano(); return ret; }}class ActionInfo{ public Scene scene;}class Scene { public long scene_id;}?package com.uniheart.securing.web.wechat.mp.services;import com.google.gson.Gson;import com.uniheart.wechatmpservice.models.Xml;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Value;import org.apache.pulsar.client.api.*;import org.springframework.stereotype.Component;import java.util.concurrent.TimeUnit;@Componentpublic class MpMessageService { Logger logger = LoggerFactory.getLogger(MpMessageService.class); private final String pulsarUrl; private final String pulsarToken; private final String pulsarTopic; public MpMessageService(@Value("${pulsar-service-url}") String pulsarUrl, @Value("${pulsar-auth-token}") String pulsarToken, @Value("${pulsar-producer-topic}") String pulsarTopic) { this.pulsarUrl = pulsarUrl; this.pulsarToken = pulsarToken; this.pulsarTopic = pulsarTopic; } public void saveMessageTo(Xml message) throws PulsarClientException { var client = PulsarClient.builder().serviceUrl(pulsarUrl).authentication(AuthenticationFactory.token(pulsarToken)).build(); var producer = client.newProducer().topic(pulsarTopic).create(); producer.send(new Gson().toJson(message).getBytes()); producer.close(); client.close(); } public synchronized Xml getMessageFor(String ticket) throws PulsarClientException { var client = PulsarClient.builder().serviceUrl(pulsarUrl).authentication(AuthenticationFactory.token(pulsarToken)).build(); var consumer = client.newConsumer().topic(pulsarTopic).subscriptionName("my-subscription").subscribe(); var xml = new Xml().fromUserName("empty"); var received = false; var count = 0; do { var msg = consumer.receive(1, TimeUnit.SECONDS); count++; if (msg != null) { var json = new String(msg.getData()); try { xml = new Gson().fromJson(json, Xml.class); received = xml.getTicket().equals(ticket); if(received){ consumer.acknowledge(msg); } } catch (Exception ex) { logger.error("Failed to parse json: " + json); xml.fromUserName(json); consumer.acknowledge(msg); } } } while (!received && count < 30); consumer.close(); client.close(); return xml; }}以上服務(wù)封裝了保存和獲取方法，消息接收的 Controller 調(diào)用起保存消息的方法： ?package com.uniheart.securing.web.wechat.mp;import com.uniheart.securing.web.wechat.mp.services.MpMessageService;import com.uniheart.wechatmpservice.api.MpMessageApi;import com.uniheart.wechatmpservice.models.Xml;import io.swagger.annotations.ApiParam;import org.apache.pulsar.client.api.PulsarClientException;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RestController;import javax.validation.Valid;@RestControllerpublic class WechatMessageController implements MpMessageApi { Logger logger = LoggerFactory.getLogger(WechatMessageController.class); private final MpMessageService mpMessageService; public WechatMessageController(MpMessageService mpMessageService) { this.mpMessageService = mpMessageService; } @Override public ResponseEntity<Void> mpMessage(@ApiParam(value = "wechat mp messages in xml format", required = true) @Valid @RequestBody Xml xml) { try { this.mpMessageService.saveMessageTo(xml); logger.info("saved info: " + xml); return new ResponseEntity<>(HttpStatus.OK); } catch (PulsarClientException e) { e.printStackTrace(); return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR); } }}?package com.uniheart.securing.web.wechat.mp;import com.uniheart.securing.web.wechat.mp.services.MpMessageService;import com.uniheart.wechatmpservice.api.MpQrScanStatusApi;import com.uniheart.wechatmpservice.models.MpQRScanStatus;import org.springframework.http.HttpStatus;import org.springframework.http.ResponseEntity;import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;import org.springframework.security.core.Authentication;import org.springframework.security.core.GrantedAuthority;import org.springframework.security.core.authority.SimpleGrantedAuthority;import org.springframework.security.core.context.SecurityContextHolder;import org.springframework.web.bind.annotation.RestController;import java.security.Principal;import java.util.ArrayList;import java.util.List;@RestControllerpublic final class WechatMpQRScanStatusApiController implements MpQrScanStatusApi { private final MpMessageService mpMessageService; public WechatMpQRScanStatusApiController(MpMessageService mpMessageService) { this.mpMessageService = mpMessageService; } @Override public ResponseEntity<MpQRScanStatus> mpQrScanStatus(String ticket) { try { var xml = this.mpMessageService.getMessageFor(ticket); if(xml.getFromUserName().equals("empty")){ return new ResponseEntity<>(new MpQRScanStatus().openId(""), HttpStatus.REQUEST_TIMEOUT); } var user = new Object() {}; List<GrantedAuthority> authorities = new ArrayList<>(); authorities.add(new SimpleGrantedAuthority("WechatMP")); Authentication authentication = new UsernamePasswordAuthenticationToken(user, null, authorities); SecurityContextHolder.getContext().setAuthentication(authentication); return new ResponseEntity<>(new MpQRScanStatus().openId(xml.getFromUserName()).status("SCANNED"), HttpStatus.OK); } catch (Exception ex) { ex.printStackTrace(); return new ResponseEntity<>(new MpQRScanStatus().openId(ex.getMessage()), HttpStatus.INTERNAL_SERVER_ERROR); } }}?function queryScanStatus(ticket) { var req = new XMLHttpRequest(); req.onreadystatechange = function () { if(req.readyState === 4 && req.status === 200) { const json = JSON.parse(req.responseText); if (json.status === 'SCANNED') { location.href = '/hello'; }else{ alert('發(fā)生錯(cuò)誤（也許是超時(shí)了）！') } } }; req.open("GET", "/mp-qr-scan-status?ticket=" + ticket); req.send(); } function showQRCodeImage() { var req = new XMLHttpRequest(); req.onreadystatechange = function () { if (req.readyState === 4 && req.status === 200) { const json = JSON.parse(req.responseText); document.getElementById('wechat-mp-qr').setAttribute('src', 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + encodeURIComponent(json.ticket)); queryScanStatus(json.ticket); } }; req.open("GET", "/mp-qr", true); req.send(); } showQRCodeImage();關(guān)鍵詞：同時(shí),關(guān)注,公眾,請(qǐng)問
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
