跳到主要內容

reCAPTCHA v3 的簡單教學


Google於10/29正式發布reCAPTCHA v3 API,該版本中最大的亮點就是透過分析使用者瀏覽網站的行為,以辨識使用者是否為機器人。換句話說,使用者再也不用一直回答問題和不停地點選圖片,所以說以後再也不用聽到客戶抱怨老是點錯圖片,果然科技始於人性啊~

另外reCAPTCHA v3 的使用方式也非常簡單,只要短短幾個步驟,就能輕鬆地將reCAPTCHA v3運用在專案中。

1. 首先,至 https://www.google.com/recaptcha/admin 替你的網站註冊一個reCAPTCHA。
2. 註冊後,將會得到Site Key和Secret Key,其中Site Key是給前端使用,而Secret Key則是給後端使用。
3. 在前端HTML head的部分加入reCAPTCHA的api.js。
    <script src='https://www.google.com/recaptcha/api.js?render=6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc'></script>
4. 接著在body的部分呼叫reCAPTCHA API向Google取得token後,再將token送至後端進行驗證,範例如下:
    <script>
          grecaptcha.ready(function () {
              console.log('1. grecaptcha.ready');
              console.log('2. grecaptcha.execute("6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc", { action: "@Url.Action("VerifyBot", "Account")" })');
                grecaptcha.execute('6Lc5vHgUAAAAAKHxlH0FdDJdA2-8yfzpoMDLIWPc', { action: '@Url.Action("VerifyBot", "Account")' }).then((token) => {
                    console.log('3. Get token from reCAPTCHA service => ', token);
                    console.log('4. Verifying Bot...');
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("VerifyBot", "Account")',
                        data: { token: token },
                        success: (res) => {
                            console.log('5. Return => ', res);
                        }
                    });
                });
          });
    </script>
5.  當後端接收到前端傳來的Token後,後端會用Token和Secret Key打一次reCAPTCHA API,以向Google取得驗證資訊,我們可以根據回傳的資訊來判斷使用者是否為機器人,例如分數低於0.5判定為機器人。範例(.NET Core)如下所示:
        public async Task<IActionResult> VerifyBot(string token)
        {
            using (var client = new HttpClient())
            {
                client.DefaultRequestHeaders.Accept.Clear();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                string url = string.Format(
                    "https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}&remoteip={2}",
                    "6Lc5vHgUAAAAAKAiwQ4IU17cme7WpCBFhO4kTRT7",
                    token,
                    this.httpContextAccessor.HttpContext.Connection.RemoteIpAddress.ToString());
                HttpResponseMessage response = await client.GetAsync(url);
                var data = await response.Content.ReadAsStringAsync();
                if (response.IsSuccessStatusCode && BotRules(JsonConvert.DeserializeObject<ReCAPTCHA>(data))) return Ok(data);
            }
            return StatusCode((int)HttpStatusCode.InternalServerError, "Internal server error");
        }
        public bool BotRules(ReCAPTCHA data)
        {
            if (data.success && data.score>=0.5)  return true;
           else  return false;
        }
        public class ReCAPTCHA
        {
          public bool success { get; set; }
          public double score { get; set; }
          public string action { get; set; }
          public DateTime challenge_ts { get; set; }
          public string hostname { get; set; }
        }
最後附上程式執行結果如下:

參考文獻: https://developers.google.com/recaptcha/docs/v3

留言

這個網誌中的熱門文章

實作 OAuth Client (使用Angular)

上次我們使用.NET Framework實作 OAuth 2.0 的 Implicit Grant Flow,而這次我們以Angular 作為Client,試圖呼叫OAuth 2.0的Authorization Endpoint(即Authorization Page)。

Angular Client建置流程

1. 建立一個Angular專案,新增Authentication Module。
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AuthenticationRoutingModule } from './authentication-routing.module'; import { HttpClientModule } from '@angular/common/http'; import { Oauth2Service } from './oauth2/services/oauth2.service'; import { Oauth2ClientPageComponent } from './oauth2/pages/oauth2-client/oauth2-client-page.component'; import { WebApiManagerService } from '../web-api/services/web-api-manager.service'; import { UserService } from '../account/services/user.service'; @NgModule({ imports: [ CommonModule, HttpClientModule, AuthenticationRoutingModule ], providers: [WebApiManagerService , Oauth2Service, UserService], declarations: [Oauth2…

什麼是OAuth 2.0 ?

什麼是OAuth 2.0 ?

在傳統的伺服器與客户端(Client-Server) 架構,客戶端(Client)想要向伺服器(Server)取得受保護的資料,必須要輸入使用者的帳號密碼。這樣的情況下會有些問題和限制:
1. 第三方應用程式需要使用者提供帳號與密碼,而這些帳號與密碼通常是以明文的方式儲存,難以保證其安全性。
2. 使用者沒辦法管控第三方應用程式對於受保護的資料的存取範圍 (Scope),以及註銷存取權。
3. 當任何第三方應用程式被破解,可能會導致受保護的資料外流。

為了處理上述這些問題,人們制定了開放授權(Open Authorization,OAuth),能夠讓第三方應用程式去訪問受存取限制的HTTP服務(如Web API)。

我們以Facebook為例子,假如第三方應用程式想要取得使用者在Facebook中的個人資料,在OAuth的架構下,第三方應用程式必須轉址(Redirect)到Facebook的認證伺服器(Authorization Server) 的授權頁面,我們稱它為Authorization Endpoint,這個頁面會要求使用者輸入Facebook帳號和密碼去確認使用者的身分,接著會彈出授權(Grant)對話框。當使用者按下同意授權(Grant),第三方應用程式便可以獲得Access Token 。最後,第三方應用程式只要使用Access Token就能存取使用者在Facebook中的個人資料。在這個例子中,第三方應用程式以Access Token作為存取資料的依據,而第三方應用程式完全不知道使用者的Facebook帳號和密碼。