[2023] LIFF Herencia masiva Por tanto, reutilización frontal

1 ¿Qué es el LIFF?

WordPress & Woocommerce incorpora muchas características como la integración con Line (API de mensajería, modo Bot…) Con Line como punto de entrada (clave), la página web puede mostrarse en última instancia en diversos navegadores, incluidos safari y chrome. El autor es un usuario orientado al navegador, y cuando visualiza una página web de Line, el usuario siempre pasa a un navegador externo*1.

Cada vez que cambia a un navegador externo, el autor se pregunta: «¿No reduciría la confusión del usuario eliminar la función de cambio de aplicación?». Y…

Afortunadamente, Line también ha tomado medidas para contrarrestar a los navegadores del mundo. Aquí es donde entra LIFF (LINE Front-end Framework): Line lo llama mini-app, pero para el gran público sería más fácil de entender si fuera un mini-navegador dependiente de Line.

Esta vez, el autor también ha realizado una «función de gestión de frecuencias (tickets)» como función original. Este artículo presenta algunas de las dificultades a las que se enfrenta el desarrollo de LIFF por primera vez, y el camino para resolverlas. Nos gustaría omitir los aspectos básicos y compartir sólo los contenidos para usuarios avanzados.

1 La función de Line Labs para iOS « Enlazar en el navegador predeterminado» está activada.

2 Varias identificaciones LIFF en el mismo anverso.

El LIFF cuenta con numerosas medidas de seguridad. Una de ellas es que sólo hay una URL de LIFF (URL de LIFF y miniaplicación de uno a uno). Esto significa que un mismo frente (URL de punto final) sólo puede ser llamado por una URL LIFF. Este esquema mejora la seguridad al eliminar la diversidad, pero el desarrollo no es adecuado para la producción en masa.

En este punto, el autor recuerda la descripción del parámetro URL en el esquema URL de LIFF: «Un frente es la URL del punto final, pero si se puede pasar el Liffid correcto en el parámetro URL, se pueden eludir los enlaces de seguridad».

Las dos funciones anteriores tienen el mismo frente inicial, pero se lanzan desde menús enriquecidos diferentes (URL LIFF).

3 Configuración de la aplicación LIFF

La URL del endpoint que enlaza con la URL del LIFF es única, pero el parámetro de la URL puede ser variable, así que deja que el liffID se cargue en el parámetro de la URL.

Utilice el liffID en el parámetro URL de la parte frontal para inicializar la aplicación LIFF correcta.

jQuery(function ($) {
    // URLSearchParamsオブジェクトを取得
    // http://var.blog.jp/archives/72768336.html
    var params = url.searchParams;
    if (params.get('liffId')) {
        liffId = params.get('liffId');
    }
    $(document).ready(function () {
        let myLiffId = liffId;
        initializeLiffOrDie(myLiffId);
    });
    function initializeLiff(myLiffId) {
        liff
            .init({
                liffId: myLiffId,
                //外部ブラウザでのLIFFアプリ初期化時にliff.login()メソッドを自動で実行する
                withLoginOnExternalBrowser: true, 
            })
            .then(() => {
                initializeApp();
            })
            .catch((err) => {
                console.error(err);
                document.getElementById("liffAppContent").classList.add("hidden");
                document
                    .getElementById("liffInitErrorMessage")
                    .classList.remove("hidden");
            });
    }
    function initializeApp() {
        if (!liff.isLoggedIn()) {
            liff.login({ redirectUri: location.href });
        } else {
            document.getElementById("liffAppContent").classList.remove("hidden");
        }
        idToken = liff.getAccessToken();
        getUserData(idToken);
    }
}

Obtener el idToken en el Liff y enviarlo al lado del servidor. A continuación, autentique el LineUserId en el lado del servidor; es obligatorio que el idToken no se analice en el lado frontal. Utilice el mismo método que en la integración de líneas hasta ahora para analizar el idToken aquí.

protected function get_line_userid()
{
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_HTTPHEADER, array("Authorization: Bearer {$this->json_obj['id_token']}"));
	curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/profile');
	curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$line_profile = curl_exec($ch);
	curl_close($ch);
	// Line情報を取得
	$line_profile = json_decode($line_profile, true);
	if (!$line_profile || !isset($line_profile['userId'])) {
		return false;
	}
	return $line_profile['userId'];
}

4 Conclusión.

Incrustar el identificador LIFF en el punto final LIFF. Creemos que la producción en masa se puede lograr con el mismo frente (URL de punto final) si podemos conseguir ajax para hacer el trabajo duro de envío y recepción en el lado del servidor.

El siguiente capítulo le mostrará los puntos clave de la visualización del historial de pedidos de woocommerce en una miniaplicación LIFF, antes de presentar el sistema de frecuencias.

Y si quieres un código fuente más detallado o estás interesado en el desarrollo de LIFF y quieres intercambiar opiniones sobre LIFE, entra y deja un comentario.