안드로이드 무비밀번호 모바일 인증

시작하기 전에 입사 절차에서 왜 tru.ID PhoneCheck을 사용하길 원하는지 토론해 봅시다.
인증이 완전하지 않아 20-30%의 등록이 모바일 장치에서 실패했습니다.문자가 지연되거나 전혀 발송되지 않아 전자메일이 결국 스팸메일로 변하거나 발송할 수 없으며 음성통화에 실패하거나 사용자가 현재 남겨진 신분 검증 옵션을 사용하는 등록 흐름에서 내비게이션을 할 때 오류가 발생했습니다.트루?ID PhoneCheck은 사용자를 검증하는 새로운 방법을 제공하여 사용자 체험의 마찰을 줄이고 입사 전환률을 높였다.
같은 번호의 액티브 SIM카드를 갖고 있는지 검증해 휴대전화 번호의 소유권을 확인하는 게 작동 원리다.이 유효성 검사를 위해 이동 데이터 세션이 고유한 검사 URL로 생성됩니다.트루?ID 및 확인 중인 전화 번호와 모바일 네트워크 운영자가 모바일 데이터 세션 소유자로 식별하는 전화 번호 간의 일치를 확인합니다.
이 강좌의 전체 코드만 깊이 있게 알고 싶으면 Github에서 찾을 수 있습니다.

네가 시작하기 전에

시작하기 전에 다음 사항이 필요합니다.

안드로이드 지원 IDE(Android Studio 권장)

모바일 연결식 안드로이드

Node.js

개시하다

다음과 같은 방법으로 starter-files 브랜치를 복제합니다.

git clone -b starter-files --single-branch https://github.com/tru-ID/passwordless-auth-android.git

CLI 설정 지침이 포함된 콘솔에서 종료할 tru.ID 계정을 생성합니다.
tru를 설치합니다.ID CLI 는 다음을 통해

npm i -g @tru_id/cli

tru를 입력하십시오.ID 자격 증명은 tru.ID console에 있습니다.
tru를 설치합니다.ID CLI development plugin server.
새 tru를 만듭니다.다음과 같은 방법으로 루트 디렉토리에서 항목을 식별합니다.

cd passwordless-auth-android && tru projects:create --project-dir .

새로 만든 프로젝트 설정을 포함하는 디렉터리를 가리키는 개발 서버를 실행합니다.이것 또한 당신의 개발 서버에 로컬 터널을 열어 인터넷에 공개적으로 접근할 수 있도록 함으로써 당신의 휴대전화는 모바일 데이터에 연결될 때만 접근할 수 있다.

tru server -t --project-dir .

프로젝트 시작

안드로이드를 지원하는 IDE에서 프로젝트를 열고 핸드폰을 컴퓨터에 연결해 안드로이드 프로젝트를 실행하고 IDE에서 프로그램을 실행할 수 있도록 한다.
항목은 다음과 같아야 합니다.

이 프로젝트의 입사 작업 절차는 네 개의 화면을 포함하는데 그것이 바로 시작, 시작, 등록과 등록이다.
시작 버튼을 클릭하여 signupFragment 사용자 인터페이스로 이동합니다.보아하니 이렇다.

전화 확인 작성

첫 번째 단계는 PhoneCheck을 만드는 것입니다.이를 위해, 우리는 POST에 사용자 전화번호가 있는 /phone-check 요청을 보내야 한다.
그리고 우리는 check_url과 check_id으로 돌아가 그것들을 이용하여 후속 통화를 할 것이다.
먼저 app/build.gradle의 데이터를 가져올 때 다음과 같은 의존 항목을 추가합니다.

dependencies {
     // retrofit and converter
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
}

그런 다음 src/main/java/com/example/tru_phonecheck에 api이라는 폴더(패키지)를 만들고 data이라는 하위 폴더(패키지)를 만듭니다.data에서 PhoneCheck.kt이라는 클래스를 만들고 다음 코드를 추가합니다.

package com.example.tru_phonecheck.api.data

import com.google.gson.annotations.SerializedName

data class PhoneCheck(  @SerializedName("check_url")
                        val check_url: String,
                        @SerializedName("check_id")
                        val check_id: String) {
}

data class PhoneCheckPost (
    @SerializedName("phone_number")
    val phone_number: String
)

여기에 우리는 두 가지 데이터 모델 유형이 있는데 그것이 바로 PhoneCheck이다. 그 구조 함수는 응답을 받는 값이고 PhoneCheckPost은 그 구조 함수는 사용자의 전화번호를 받는다.
우리는 또한 @SerializedName을 사용하여 예상한 입력/응답과 일치하는 값을 확보한다.
그런 다음 api 폴더로 이동하여 retrofit 이라는 다른 폴더(패키지)를 만듭니다.그 중에서 RetrofitService이라는 인터페이스를 만들고 그 내용을 다음과 같이 바꿉니다.

package com.example.tru_phonecheck.api.retrofit

import com.example.tru_phonecheck.api.data.PhoneCheck
import com.example.tru_phonecheck.api.data.PhoneCheckPost
import retrofit2.Response
import retrofit2.http.*

interface RetrofitService {
    @Headers("Content-Type: application/json")
    @POST("/phone-check")
    suspend fun createPhoneCheck(@Body user: PhoneCheckPost): Response<PhoneCheck>
    companion object {
        // set up base_url in the format https://{subdomain}.loca.lt gotten from localTunnel URL
        const val base_url = "https://{subdomain}.loca.lt"
    }
}

여기에서 우리는 우리가 만든 모형을 사용하여 POST 요청을 보냅니다.우리는 또한 companion object을 창설했는데, 이것은 우리가 대상으로 base_url(즉 RetrofitService.base_url)을 방문할 수 있도록 허락한다.base_url의 자리 표시자 URL을 local Tunnel URL로 교체해야 합니다.
현재, 우리는 사용자가 터치 단추를 누르고 POST 요청을 시작할 때 사용자의 전화번호를 받아야 한다.
먼저 src/main/java/com/example/tru_phonecheck/fragments/onboarding/screens/signupFragment.kt으로 이동하여 버튼을 누를 때 UI를 비활성화하는 기능을 추가합니다.

  private fun setUIStatus (button: Button?, input: EditText, enabled: Boolean){
      activity?.runOnUiThread {
              button?.isClickable = enabled
              button?.isEnabled = enabled
              input.isEnabled = enabled
      }
  }

그런 다음 다음과 같은 항목을 추가하여 개조 서비스를 만듭니다.

//retrofit setup
private fun rf(): RetrofitService {
    return  Retrofit.Builder().baseUrl(RetrofitService.base_url).addConverterFactory(GsonConverterFactory.create()).build().create(RetrofitService::class.java)
}

마지막으로 return view 함수의 onCreateView에 다음을 추가합니다.

...
view.submitHandler.setOnClickListener {
    // get phone number
    val phoneNumber = phoneNumberInput.text.toString()
    Log.d("phone number is", phoneNumber)

    // close virtual keyboard
    phoneNumberInput.onEditorAction(EditorInfo.IME_ACTION_DONE)

    // if it's a valid phone number begin createPhoneCheck
    if(!isPhoneNumberFormatValid(phoneNumber)) {
        Snackbar.make(container as View, "Invalid Phone Number", Snackbar.LENGTH_LONG).show()
    } else {
        println("valid number")

        // disable the UI
        setUIStatus(submitHandler, phoneNumberInput, false)

        CoroutineScope(Dispatchers.IO).launch {
          try {
              val response = rf().createPhoneCheck(PhoneCheckPost(phoneNumber))

              if(response.isSuccessful && response.body() != null){
                  val phoneCheck = response.body() as PhoneCheck

                  // open checkURL

                  // get PhoneCheck result
              }
          } catch(e: Throwable){
              Snackbar.make(container as View, e.message!!, Snackbar.LENGTH_SHORT).show()
          }

          // enable the UI
          setUIStatus(submitHandler, phoneNumberInput, true)
        }
    }
}

ID가 submitHandler인 버튼에 클릭 listener를 추가합니다.버튼을 눌렀을 때, 우리는 전화번호를 잡고, src/main/java/com/example/tru_phonecheck/utils/PhoneNumberUtil.kt의 실용 프로그램 기능을 통해 그것이 유효한지 검사했다.만약 이것이 유효한 숫자라면, 우리는 setUIStatus을 통해 UI를 사용하지 않고, rf().createPhoneCheck 함수를 사용하여 네트워크 요청을 보내서 전화 검사를 만들 것입니다.

검사 URL 열기

다음 단계는 우리에게 되돌아오는 검사 URL을 여는 것입니다.이를 위해 tru.ID Android SDK을 사용해야 합니다.SDK는 URL 네트워크를 강제로 검사하여 모바일 데이터 연결을 통해 모바일 네트워크 운영자와tru를 연결할 수 있도록 합니다.ID는 전화 번호를 확인할 수 있습니다.build.gradle으로 돌아가 다음 종속성을 추가합니다.

dependencies {
  ...
    // tru.ID Android package
    implementation 'id.tru.sdk:tru-sdk-android:0.0.3'
}

이제 시작할 때 SDK를 초기화해야 합니다.이렇게 하려면 MainActivity.kt으로 이동하여 다음과 같이 업데이트하십시오.

package com.example.tru_phonecheck

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import id.tru.sdk.TruSDK

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {

        // initialize Tru SDK
        TruSDK.initializeSdk(applicationContext)

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        supportActionBar?.hide()
    }
}

SignupFragment.kt으로 돌아가 onCreateView에 다음을 추가합니다.

private val truSDK = TruSDK.getInstance()

SDK를 사용하여 setOnClickListener 함수에서 검사 URL을 엽니다.

if(response.isSuccessful && response.body() != null){
    val phoneCheck = response.body() as PhoneCheck

    // open checkURL
    truSDK.openCheckUrl(phoneCheck.check_url)

    // get PhoneCheck result
}

이제 확인 URL이 열렸습니다.

전화 확인 응답 받기

우리가 해야 할 마지막 일은 전화 검사 응답을 얻는 것이다.PhoneCheck.kt으로 이동하여 내용을 업데이트:

package com.example.tru_phonecheck.api.data

import com.google.gson.annotations.SerializedName

data class PhoneCheck(  @SerializedName("check_url")
                        val check_url: String,
                        @SerializedName("check_id")
                        val check_id: String) {
}

data class PhoneCheckPost (
    @SerializedName("phone_number")
    val phone_number: String
)

data class PhoneCheckResponse(
    @SerializedName("check_id")
    val check_id: String,
    @SerializedName("match")
    val match: Boolean
)

우리는 두 개의 필드를 포함하는 새로운 모델 PhoneCheckResponse을 추가했다. check_id과 match이다.후자는 전화번호를 검증하는 데 쓰인다.
그런 다음 RetrofitService.kt으로 이동하여 코드 지원을 업데이트하여 PhoneCheck 리소스를 가져오십시오.

@GET("/phone-check")
suspend fun getPhoneCheck(@Query("check_id") checkId: String): Response<PhoneCheckResponse>

여기서 우리는 GET에 /phone-check?check_id={check_id} 함수를 추가했는데, 우리는 check_id 값을 호출할 때 동적으로 그것을 전달한다.
우리는 또한 모델 유형 PhoneCheckResponse을 우리가 기대하는 응답 대상에 비추었다.
이제 SignupFragment.kt으로 이동하여 PhoneCheck 결과를 추가하겠습니다.

if(response.isSuccessful && response.body() != null){
    val phoneCheck = response.body() as PhoneCheck

    // open checkURL
    truSDK.openCheckUrl(phoneCheck.check_url)

    // get PhoneCheck result
    val response = rf().getPhoneCheck(phoneCheck.check_id)

    if(response.isSuccessful && response.body() != null){
        val phoneCheckResponse = response.body() as PhoneCheckResponse

        // update UI with phoneCheckResponse
        if(phoneCheckResponse.match){
            findNavController().navigate(R.id.action_signupFragment_to_signedUpFragment)

        } else {
            Snackbar.make(container as View, "Registration Failed", Snackbar.LENGTH_LONG).show()
        }
    }
    else {
        Snackbar.make(container as View, "An unexpected problem occurred", Snackbar.LENGTH_LONG).show()
    }
}

마지막으로 우리는 이전에 phoneCheck.check_id의 응답을 통해 얻은 PhoneCheck을 사용하여 전화 검사 결과를 얻었다.전화 번호가 확인되면 사용자는 signedUpFragment 보기로 이동합니다.만약 검증이 실패한다(phoneCheckResponse.match이 false)면 우리는'실패'토스트를 나타낼 것이다.signedUpFragment 사용자 인터페이스는 다음과 같습니다.

이렇게!

마무리

모든 것이 준비된 후에 우리는 현재 틈새 없는 등록 절차를 가지게 되었고 사용자 체험 마찰이 가장 적으며 사용자의 유실을 초래하지 않을 것이다.
너는 이미tru를 성공적으로 집적했다.ID PhoneCheck이 안드로이드 입사 프로세스에 들어갑니다.