Implementação do Login com meuID (Android)

Resumo:

1. Baixar arquivos de design do botão e adicionar na pasta res/drawable;

2. Baixar arquivo config.xml e adicionar na pasta res/values;

3. Configurar seu applicationId;

4. Incluir custom view (MeuIdButton.kt) no projeto;

5. Fazer o setup dos parâmetros de design do botão;

6. Inserir custom view (MeuIdButton.kt) no layout da activity/fragment;

7. Setar AndroidManifest.xml para receber resposta do meuID;

8. Obter os parâmetros da query do deeplink retornado pelo meuID;

9. Configurar requisições para o backend.

---

1). Arquivos de design do botão

1.a) Baixe aqui os arquivos relacionados abaixo e adicione-os na sua pasta res/drawable :

bg_meuid_btn_dark.xml

bg_meuid_btn_light.xml

bg_meuid_btn_light_outline.xml

ic_meuid_logo_dark.xml

ic_meuid_text_dark.xml

ic_meuid_logo_light.xml

ic_meuid_text_light.xml

---

2). Arquivo de configuração

2.a). Baixe aqui o arquivo config.xml e adicione-o na sua pasta res/values

---

3). Configurar applicationId

3.a). Abra o arquivo config.xml e insira seu applicationId :

Substitua {YOUR_APP_ID} pelo seu applicationId

config.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- TODO: Update {YOUR_APP_ID} with your applicationID -->
<!DOCTYPE resources [<!ENTITY applicationId "{YOUR_APP_ID}">]>
<resources>
    <string name="meuid_application_id">&applicationId;</string>
    <string name="meuid_scheme">meuid-&applicationId;</string>
</resources>

---

4). Incluir custom view (MeuIdButton.kt) no projeto:

4.a). Crie uma CustomView MeuIdButton.kt com o seguinte código:

MeuIdButton.kt

// TODO: ("Update with your package path")
package com.sampleloginmeuid_android

import android.content.Context
import android.content.Intent
import android.content.pm.PackageManager
import android.graphics.drawable.Drawable
import android.net.Uri
import android.util.AttributeSet
import android.view.Gravity
import androidx.appcompat.widget.AppCompatButton
import androidx.core.content.res.ResourcesCompat

class MeuIdButton(context: Context, attrs: AttributeSet? = null) : AppCompatButton(context, attrs) {

    init {
        setBtnAsEnable()
        setBtnLayoutGravity()
        setBtnStyle()
        setBtnSize()
        setBtnClickListener()
    }

    private fun setBtnAsEnable() {
        isEnabled = true
    }

    private fun setBtnLayoutGravity() {
        gravity = Gravity.CENTER
    }

    private fun setBtnStyle() {
        val style = buttonStyle
        setBtnBackground(style)
        setBtnContent(style)
    }

    private fun setBtnBackground(style: String) {
        setBackgroundResource(
            when (style) {
                "button_light" -> R.drawable.bg_meuid_btn_light
                "button_light_outline" -> R.drawable.bg_meuid_btn_light_outline
                "button_dark" -> R.drawable.bg_meuid_btn_dark
                else -> R.drawable.bg_meuid_btn_dark
            }
        )
    }

    private fun setBtnContent(style: String) {
        val icons: Pair<Drawable?, Drawable?> = when (style) {
            "button_light", "button_light_outline" -> Pair(
                getDrawable(R.drawable.ic_meuid_logo_light),
                getDrawable(R.drawable.ic_meuid_text_light)
            )
            "button_dark" -> Pair(
                getDrawable(R.drawable.ic_meuid_logo_dark),
                getDrawable(R.drawable.ic_meuid_text_dark)
            )
            else -> Pair(
                getDrawable(R.drawable.ic_meuid_logo_dark),
                getDrawable(R.drawable.ic_meuid_text_dark)
            )
        }
        val logoIcon = icons.first
        val textIcon = icons.second
        setCompoundDrawablesWithIntrinsicBounds(logoIcon, null, textIcon, null)
    }

    private fun getDrawable(resource: Int) = ResourcesCompat.getDrawable(resources, resource, null)

    private fun setBtnSize() {
        val hrzPadding: Int
        val vrtPadding: Int

        when (buttonSize) {
            "small" -> {
                hrzPadding = convertToDp(24)
                vrtPadding = convertToDp(8)
            }
            else -> {
                hrzPadding = convertToDp(48)
                vrtPadding = convertToDp(12)
            }
        }
        minimumHeight = convertToDp(40)
        minHeight = convertToDp(40)
        compoundDrawablePadding = convertToDp(6)

        setPadding(hrzPadding, vrtPadding, hrzPadding, vrtPadding)
    }

    private fun convertToDp(px: Int) = px * context.resources.displayMetrics.density.toInt()

    private fun setBtnClickListener() {
        setOnClickListener {
            val applicationId = context.resources.getString(R.string.meuid_application_id)
            val intent = Intent(Intent.ACTION_VIEW)
            intent.data = Uri.parse("meuid://meuid?action=MEUID_AUTHENTICATION&applicationId=$applicationId&parameters=eyJvcmlnaW4iOiJNT0JJTEVfQVBQIn0%3D")
            if (isSafeToCall(intent).not()) {
                intent.data = Uri.parse("https://play.google.com/store/apps/details?id=com.meuid")
            }
            context.startActivity(intent)
        }
    }

    private fun isSafeToCall(intent: Intent): Boolean {
        return context.packageManager.queryIntentActivities(
            intent,
            PackageManager.MATCH_DEFAULT_ONLY
        ).isNotEmpty()
    }

    companion object {
        // TODO: ("Set button style") -> options: "button_dark" / "button_light" / "button_light_outline"
        const val buttonStyle = "button_dark"

        // TODO: ("Set button size") -> options: "default" / "small"
        const val buttonSize = "default"
    }
}

Importante: Atualize o package path na classe MeuIdButton.kt de acordo com o package path do seu app:

// TODO: (“Update with your package path”)
package com.sampleloginmeuid_android

---

5) Setup dos parâmetros de design do botão

5.a). Na CustomView MeuIdButton.kt criada, faça o setup dos seguintes parâmetros ao final do código:

       // TODO: ("Set button style") -> options: "button_dark" / "button_light" / "button_light_outline"
       const val buttonStyle = "button_dark"

       // TODO: ("Set button size") -> options: "default" / "small"
       const val buttonSize = "default"

Escolha entre 3 estilos (dark/light outline/light ) e 2 tamanhos (default/small ) de botão:

dark

light outline

light

dark small

---

6). Inserir Custom View no layout da activity/fragment

6.a). Dentro do Layout da Activity que irá implementar o botão Login com MeuID, adicione o código xml abaixo:

<!-- TODO: ("Update with your MeuIdButton package path") -->
<com.sampleloginmeuid_android.MeuIdButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

Importante: Atualize o trecho com.sampleloginmeuid_android acima com o package path onde se encontra a classe MeuIdButton.kt no seu app

---

7). Setar AndroidManifest.xml para receber resposta do meuID

7.a). Para poder receber a resposta do meuID para a solicitação realizada, insira o código abaixo no seu arquivo AndroidManifest.xml:

        <activity android:name=".HomeActivity">
            <intent-filter android:label="LoginMeuID">
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:host="authorize"
                    android:scheme="@string/meuid_scheme" />
            </intent-filter>
        </activity>

Importante: No código acima, substitua .HomeActivity pela activity do seu app que irá tratar o deeplink recebido

---

8). Obter os parâmetros da query do deeplink enviado pelo meuID

8.a) Na activity que irá receber o deeplink (configurado no passo anterior) extraia os parâmetros da query enviada pelo meuID utilizando o código abaixo dentro do método onCreate:

Kotlin

        intent?.data?.let {
            val code = getQueryParameter("code")
            val codeVerifier = getQueryParameter("code_verifier")

            // Handle parameters here...
        }

Java

        if (getIntent().getData() != null) {
            Uri deeplink = getIntent().getData();
            String code = deeplink.getQueryParameter("code");
            String codeVerifier = deeplink.getQueryParameter("code_verifier");

            // Handle parameters here...
        }

Importante: Os parâmetros code e code_verifier extraídos deste deeplink serão utilizados no passo seguinte para coletar as informações autorizadas pelo usuário

---

9). Configurar requisições para o backend

9.a) Clique aqui para dar prosseguimento à configuração das requisições para o backend