feat(UNI-208): add username password login button

Jeff-Tian · Mar 22, 2024 · cd02f44 · cd02f44
1 parent 0bbf7b0
commit cd02f44
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/pom.xml b/pom.xml
@@ -5,7 +5,7 @@
     <groupId>org.keycloak</groupId>
     <artifactId>keycloak-services-social-weixin</artifactId>
     <packaging>jar</packaging>
-    <version>0.5.23</version>
+    <version>0.5.24</version>
 
     <name>Keycloak Services Social WeiXin</name>
     <description>Keycloak 微信登录插件，支持 PC 端扫码登录、关注公众号即登录、手机微信等登录方式。</description>

diff --git a/src/main/java/org/keycloak/social/weixin/resources/QrCodeResourceProvider.java b/src/main/java/org/keycloak/social/weixin/resources/QrCodeResourceProvider.java
@@ -55,6 +55,11 @@ public Response helloAnonymous() {
     public Response mpQrUrl(@QueryParam("ticket") String ticket, @QueryParam("qr-code-url") String qrCodeUrl, @QueryParam("state") String state, @QueryParam(OAUTH2_PARAMETER_REDIRECT_URI) String redirectUri) {
         logger.info("展示一个 HTML 页面，该页面使用 React 展示一个组件，它调用一个后端 API，得到一个带参二维码 URL，并将该 URL 作为 img 的 src 属性值");
 
+        var host = session.getContext().getUri().getBaseUri().toString();
+        var realmName = session.getContext().getRealm().getName();
+
+        logger.info(String.format("host is %s, realmName is %s", host, realmName));
+
         var template = """
                 <!DOCTYPE html>
                 <html>
@@ -65,9 +70,11 @@ public Response mpQrUrl(@QueryParam("ticket") String ticket, @QueryParam("qr-cod
                     <p>请使用微信扫描下方二维码：</p>
                     <div id="qrCodeContainer">
                         <img src="%s" alt="%s">
+                
+                        <p></p>
+                        <p><button id="login-by-username-password" onclick="keycloak.login({ idpHint:'username' });" type="button">使用密码登录</button></p>
                     </div>
                     <script type="text/javascript">
-                
                         async function fetchQrScanStatus() {
                             const res = await fetch(`mp-qr-scan-status?ticket=%s`, {
                                 headers: {
@@ -88,11 +95,28 @@ async function fetchQrScanStatus() {
                     </script>
                 
                     <script src="/js/keycloak.js" type="text/javascript"></script>
+                    <script type="text/javascript">
+                        const keycloak = new Keycloak({
+                            url: '%s',
+                            realm: '%s',
+                            clientId: 'account-console'
+                        });
+                
+                        keycloak.init({
+                            onLoad: 'login-required'
+                        }).success(authenticated => {
+                            if (authenticated) {
+                                console.log('authenticated');
+                            } else {
+                                console.log('not authenticated');
+                            }
+                        });
+                    </script>
                 </body>
                 </html>
                 """;
 
-        String htmlContent = String.format(template, qrCodeUrl, ticket, ticket, redirectUri, state);
+        String htmlContent = String.format(template, qrCodeUrl, ticket, ticket, redirectUri, state, host, realmName);
 
         // 返回包含HTML内容的响应
         return Response.ok(htmlContent, MediaType.TEXT_HTML_TYPE).build();