Блог

У нас есть веб-сайт (client1), который использует IdentityServer4 для аутентификации. Теперь мы хотим, чтобы наше мобильное приложение xamarain (client2) выполняло аутентификацию с помощью IdentityServer4 с использованием биометрики (touch id, faceid и fingerprint) без использования предоставления учетных данных владельца ресурса (поскольку это не рекомендуется) Кто-нибудь это делал?

Я хочу подчеркнуть, что IdentityServer хочет, чтобы вы прошли аутентификацию на сервере! Вот почему вы не видите много решений для проверки подлинности учетных данных, которые вводятся за пределами сервера. Я даже не пробовал поток паролей владельца ресурса, так как я прочитал, что это не рекомендуется. Тогда как мы используем биометрию?

Вот один рецепт, который работает.

У нас есть прогрессивное приложение (веб, iOS, Android), а технологический стек — платформа Ionic v6 с использованием angular-auth-oidc-client, плагины cordova: cordova-plugin-fingerprint-aio, cordova-plugin-inappbrowser, ionic-plugin-deeplinks и IdentityServer4.

InAppBrowser имеет решающее значение, потому что мы используем его для открытия страницы входа и установки обработчиков событий. Страница входа обслуживается IdentityServer. Форма входа содержит поля имени пользователя, пароля и кнопки входа и кнопки биометрии. Пользователь нажимает кнопку биометрии, которая находится в форме входа — отправка запроса контроллеру. Задача контроллера должна перенаправляться обратно клиенту, чтобы позволить пользователю активировать логику плагина biometrics. Клиент знает, что кнопка биометрии была нажата из-за URL, который я отправляю обратно и считываю из обработчика событий InAppBrowser.

Раздел из метода входа в систему контроллера для перенаправления обратно клиенту

   if (loginViewModel.ExternalLoginScheme=="Biometrics") {  //check for biometric button click  - we will go back to client to get biometric auth and inAppBrowser event handler execute loginFormSubmit() on Login.cshtml
            var redirectUrl = System.Web.HttpUtility.ParseQueryString(loginViewModel.ReturnUrl).Get("redirect_uri");
            var appendToUrl = "?biometricsLogin=true";
            return Redirect(redirectUrl   appendToUrl);
        }
  

Это только одна часть решаемой головоломки. Здесь ничего особенного. Просто возвращаю ‘?biometricsLogin= true’ на обратном пути к клиенту. Теперь нам нужно прочитать это из события InAppBrowser на клиенте. Вот раздел Login.ts, в котором я открываю InAppBrowser и обработчики событий.

 urlHandler(authUrl) {
console.log('urlHandler: authUrl='  authUrl);
this.browser = this.iab.create(authUrl, '_blank', 'toolbar=no,location=no,menubar=no,clearcache=yes,clearsessioncache=yes');
this.browser.on('loadstart').subscribe((event: InAppBrowserEvent) => {
  console.log('login.ts->InAppBrowserEvent=' JSON.stringify(event));
  if (event.url.includes('ionic://insuredportalmobile?')||
    event.url.includes('ionic:/insuredportalmobile?')) {
      if (event.url.includes('biometricsLogin')) {
        this.biometricsLogin();
      } else {
this.ngZone.run(() => {
              this.oidcSecurityService.checkAuth(event.url).subscribe();
            });
          }
        }
    });
    this.browser.on('loaderror').subscribe(event => {  //this handles android
      if (event.message === 'net::ERR_UNKNOWN_URL_SCHEME') {
         //close the browser in ionViewWillLeave
         if (this.browser) {
          this.browser.close();
        }
        this.browser = null;
      }
    });

  }
  

Теперь мы можем использовать плагин для создания биометрического логина на клиенте!

Раздел кода для этого

 loadBiometricsLogin() {
this.fingerprintAIO.loadBiometricSecret({
  description: 'loginMyCompany',
  disableBackup: true, // always disabled on Android
}).then( (res2) => {
  //successful either face or fingerprint was verified get credentials and place them in variables for username and password 
  const u = res2.substring(0,20);
  const p = res2.substring(20);
  const script = 'submitLoginForm('' u '','' p '');';
  this.browser.executeScript({code: script});   //This is magical!
}).catch( (err) => {
  console.log('Fail loadBiometricSecret');
  console.log(JSON.stringify(err));
});
  

}

Строка кода this.browser.executeScript, указанная выше, выполнит скрипт для вызова метода submitLoginForm, который находится в login.cshtml, показанном ниже.

 function submitLoginForm(u,p) {
            var el = document.getElementById("Username");
            el.value = u;
            el = document.getElementById("Password");
            el.value = p;
            document.forms['LoginForm'].submit();
        }
  

Я не предоставляю здесь полный код. Просто рецепт, который работает. Удачи!