97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
<div class="ui-g">
|
|
<div class="ui-g-12">
|
|
<b>구글 인증기(OTP)</b>는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.
|
|
연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.
|
|
</div>
|
|
|
|
<div class="ui-g">
|
|
<div class="ui-g-6">
|
|
<p-card subtitle="IOS 회원">
|
|
<p>App Store에서 "Authenticator" 검색 후 다운로드 해주세요.<br><br></p>
|
|
<button type="button" pButton label="App Store" icon="fa-check"></button>
|
|
</p-card>
|
|
</div>
|
|
<div class="ui-g-6">
|
|
<p-card subtitle="안드로이드 회원">
|
|
<p>구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.<br><br></p>
|
|
<button type="button" pButton label="Google Play" icon="fa-check"></button>
|
|
</p-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui-g-12">
|
|
<h2>Key & Backup Code</h2>
|
|
<div class="ui-g-3" *ngIf="totp">
|
|
<qrcode [qrdata]="totp.uri" [size]="150" [level]="'M'"></qrcode>
|
|
</div>
|
|
|
|
<div class="ui-g-9">
|
|
<div style="height: 80px;"></div>
|
|
<div class="ui-bottom-space-10" *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
|
|
<span class="md-inputfield">
|
|
<input type="text" id="code" autocomplete="off" placeholder="Please enter your code" formControlName="code"
|
|
required class="ui-inputtext ui-corner-all ui-state-default ui-widget" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
|
|
</span>
|
|
</div>
|
|
|
|
<!--QR Code print & Key Print-->
|
|
</div>
|
|
<div class="ui-g-12" dir="rtl">
|
|
<button type="button" class="ui-button-width-fit ui-button-secondary" pButton icon="fa-close" (click)="onCancel()" label="No"></button>
|
|
<button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
|
|
</div>
|
|
</div>
|
|
<!--<p-panel>-->
|
|
<!--<p-header [style]="{'margin-bottom':'20px'}">-->
|
|
<!--<div>-->
|
|
<!--구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.-->
|
|
<!--연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.-->
|
|
<!--</div>-->
|
|
<!--</p-header>-->
|
|
<!--구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.-->
|
|
<!--연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.-->
|
|
<!--</p-panel>-->
|
|
<!--<p-panel>-->
|
|
|
|
<!--</p-panel>-->
|
|
|
|
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
|
|
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
|
|
|
|
<!--<mat-card class="example-card">-->
|
|
<!--<mat-card-header>-->
|
|
<!--<mat-card-title>QR Code</mat-card-title>-->
|
|
<!--<!–<mat-card-subtitle>Select Target</mat-card-subtitle>–>-->
|
|
<!--</mat-card-header>-->
|
|
<!--<mat-card-content>-->
|
|
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">-->
|
|
<!--<qrcode [qrdata]="'otpauth://totp/overFlow:geekdev@naver.com?secret=X6AWAK573M5372NM'" [size]="128" [level]="'M'"></qrcode>-->
|
|
<!--</div>-->
|
|
<!--</mat-card-content>-->
|
|
<!--</mat-card>-->
|
|
|
|
<!--</div>-->
|
|
|
|
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
|
|
|
|
<!--<mat-card class="example-card">-->
|
|
<!--<mat-card-header>-->
|
|
<!--<mat-card-title>Secret Code</mat-card-title>-->
|
|
<!--<mat-card-subtitle>X6AWAK573M5372NM</mat-card-subtitle>-->
|
|
<!--</mat-card-header>-->
|
|
<!--<mat-card-content>-->
|
|
<!--<form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="registClick()">-->
|
|
<!--<mat-form-field class="full-width">-->
|
|
<!--<input type="text" id="code" class="input" placeholder="Please enter your code"-->
|
|
<!--formControlName="code" required matInput>-->
|
|
<!--</mat-form-field>-->
|
|
<!--<!–<div *ngIf="formErrors.email" class="help is-danger">–>-->
|
|
<!--<!–{{ formErrors.email }}–>-->
|
|
<!--<!–</div>–>-->
|
|
<!--</form>-->
|
|
<!--</mat-card-content>-->
|
|
<!--</mat-card>-->
|
|
|
|
<!--</div>-->
|
|
|