Google OTP로 이중 인증 - QR 코드 대신 수동으로 키 입력

Question

Google OTP 앱에서 QR 코드를 스캔하거나 발행자가 제공 한 키를 직접 입력 할 수 있습니다.

다음 스크린 샷에서 두 번째 방법에 따라 TOTP를 얻는 방법을 보여주는 Google 보안 설정 중 2FA 설정을 볼 수 있습니다.

내 질문은 : 어떻게이 키가 생성된다?

내 웹 사이트 용 Google Authenticator로 2FA를 지원하려고하고 있는데 QR 코드를 생성하는 방법에 대한 많은 참고 자료 및 문서를 찾았지만 대체 방법에 대해서는 언급하지 않았습니다.

편집 :

조금 명확하게하기 위해, 내가 Grails의 3 웹 애플리케이션에 구글 인증 자와 2FA를 지원하고있다. 이미 각 사용자에 대해 비밀 키 (Base32 문자열)를 생성하고 사용자가 스캔 할 QR 코드를 제공하고 로그인시 TOTP를 확인함으로써 전체 사용자 흐름을 구현했습니다. 나는 의존성으로 사용 : 편리하게 QR 코드를 생성하는 GA에서 TOTP에 대해

org.grails.plugins:qrcode, qrcode Grails plugin을 사용자 비밀 키를 확인하기 위해

• org.jboss.aerogear:aerogear-otp-java, aerogear OTP 내 질문에 두 가지 방법에 관한 것입니다

Google OTP 앱에 새 항목 추가 : 1. QR 코드 (내 측면에서는 모두 정상입니다.) 2. 영문 이름과 함께 계정 이름을 직접 입력하십시오 (첫 번째 스크린 샷에서 Google 보안 설정에 코드가 제공됨).

가 어떻게 생성 할 수 있으며, 1 스크린 샷 fzee로 시작하는 (예 : 코드를 제공하고, 2 차에 "키를 제공"이라는 : ​​

당신은 안드로이드에 대한 GA에서 설명이되는 스크린 샷을 볼 수 있습니다 하나) 사용자에게? QR 코드로 인코딩 된 동일한 데이터 문자열의 인코딩이라고 확신하지만 어느 것이 (단지 Base32이 아닌지) 알지 못합니다.

Answer 1

키 생성 위치를 추적하는 데 도움이 귀하의 사이트에이를 구현하기 위해 사용하려고하는 코드베이스 알려주세요 secret

키는 생성 한 암호와 같아야합니다. Google 인증 프로그램을 열고 수동으로 키로 추가하여 테스트하십시오.

는

체크 아웃 아래 링크에서 문서 : https://support.google.com/accounts/answer/1066447?co=GENIE.Platform%3DiOS&hl=en

Answer 2

Google 인증 자 설정 QR 코드는 다음 중 하나를 기반으로 생성되며 그 중 하나는 "비밀 키"이므로 사이트에 빌드하는 데 사용하는 코드베이스에 따라 "비밀 키"가 정상적으로 생성됩니다 먼저 그 키가 QR 코드를 생성하는 데 사용됩니다. 이 보면

는 당신이 할 수있는 당신이 약

여기

// generate base32 secret 
var secret = GA.encode('base 32 encoded user secret') || GA.secret(); 

// get QRCode in SVG format 
var qrCode = GA.qrCode('akanass', 'otp.js', secret); 

https://github.com/njl07/otp.js/#qrcode-generation

가 수동으로 QR 코드를 생성 할 수있는 또 다른 예를 들어 사이트입니다 내가 무슨 말을 볼 수 있습니다 모듈을 Node.js를 Label, User, Key and URL을 입력하면 QR 코드가 생성됩니다.

https://dan.hersam.com/tools/gen-qr-code.html

= 내가 당신이 그때 당신은 비밀 키가

Answer 3

public class HomeController : Controller 
    { 
     private const string key = "key"; // any 10-12 char string for use as private key in google authenticator 
     public ActionResult Login() 
     { 
      return View(); 
     } 

     [HttpPost] 
     public ActionResult Login(LoginModel login) 
     { 
      string message = ""; 
      bool status = false; 

      //check username and password form our database here 
      //for demo I am going to use Admin as Username and Password1 as Password static value 
      if (login.Username == "sanket" && login.Password == "123") 
      { 
       status = true; // show 2FA form 
       message = "2FA Verification"; 
       Session["Username"] = login.Username; 

       //2FA Setup 
       TwoFactorAuthenticator tfa = new TwoFactorAuthenticator(); 
       string UserUniqueKey = login.Username + key; //as Its a demo, I have done this way. But you should use any encrypted value here which will be unique value per user 
       Session["UserUniqueKey"] = UserUniqueKey; 
       var setupInfo = tfa.GenerateSetupCode("Sanket Security", login.Username, UserUniqueKey, 300, 300); 
       ViewBag.BarcodeImageUrl = setupInfo.QrCodeSetupImageUrl; 
       ViewBag.SetupCode = setupInfo.ManualEntryKey; 
      } 
      else 
      { 
       message = "Invalid credential"; 
      } 
      ViewBag.Message = message; 
      ViewBag.Status = status; 
      return View(); 
     } 

     public ActionResult MyProfile() 
     { 
      if (Session["Username"] == null || Session["IsValid2FA"] == null || !(bool)Session["IsValid2FA"]) 
      { 
       return RedirectToAction("Login"); 
      } 
      ViewBag.Message = "Welcome " + Session["Username"].ToString(); 
      return View(); 
     } 
     public ActionResult Verify2FA() 
     { 
      var token = Request["passcode"]; 
      TwoFactorAuthenticator tfa = new TwoFactorAuthenticator(); 
      string UserUniqueKey = Session["UserUniqueKey"].ToString(); 
      bool isValid = tfa.ValidateTwoFactorPIN(UserUniqueKey, token); 
      if (isValid) 
      { 
       Session["IsValid2FA"] = true; 
       return RedirectToAction("MyProfile", "Home"); 
       token=string.Empty; 
      } 
      return RedirectToAction("Login", "Home"); 
     } 
    } 
} 

Answer 4

And View 

@model _2FAGoogleAuthenticator.ViewModel.LoginModel 

@{ 
    ViewBag.Title = "Login"; 
} 

<h2>Login</h2> 

@* Here we will add 2 form, 1 for Login and another one for 2FA token verification form *@ 
@if (ViewBag.Status == null || !ViewBag.Status) 
{ 
    <!--Show login form here, Viewbag.Status is used for check is already veirfied from our database or not--> 
    <div>@ViewBag.Message</div> 
    <div> 
     @using (Html.BeginForm()) 
     { 
      <div class="form-group"> 
       <label for="Username">Username : </label> 
       @Html.TextBoxFor(a => a.Username, new { @class = "form-control"}) 
      </div> 
      <div class="form-group"> 
       <label for="Password">Password : </label> 
       @Html.TextBoxFor(a => a.Password, new { @class="form-control", type="password"}) 
      </div> 
      <input type="submit" value="Login" class="btn btn-default" /> 
     } 
    </div> 
} 
else 
{ 
    <!--Show 2FA verification form here--> 
    <div>@ViewBag.Message</div> 
    <div> 
     <img src="@ViewBag.BarcodeImageUrl"/> 
    </div> 
    <div> 
     **Manual Setup Code : @ViewBag.SetupCode** 
    </div> 
    <div> 
     @using (Html.BeginForm("Verify2FA","Home", FormMethod.Post)) 
     { 
      <input type="text" name="passcode" /> 
      <input type="submit" class="btn btn-success" /> 
     } 
    </div> 
}