跳到主要內容

發表文章

目前顯示的是 11月, 2018的文章

Angular: let a singleton service create multiple instances

我們都知道Angular Service是Singleton Pattern,但是不幸的事... 我們有時會因為一些需求,希望能夠在多個元件中不要共用同一個Instance,而是在多個元件中使用不同的Instance。 事實上這個問題並不難,其實只需要短短幾行程式碼就可以解決,我們只要使用useClass並配合@Inject去注入Service就可以得到不同的Instance,其範例如下所示。 1. 首先,我們在providers它建立了兩個provider分別是Instance_1和Instance_2。 2. 接著在constructor使用@Inject去注入那兩個provider。 3. 最後你會發現Instance_1和Instance_2會是不同的Instance。 @Component({ selector: 'app-root', providers: [ { provide: 'Instance_1', useClass: StorageService }, { provide: 'Instance_2', useClass: StorageService } ], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor( @Inject('Instance_1') private Instance_1: StorageService, @Inject('Instance_2') private Instance_2: StorageService) { console.log(this.Instance_1 === this.Instance_2); } }

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: '@