Vai al contenuto

Intervista a “Emilio” un bot di ChatGPT

Se vi foste persi il capitolo precedente, abbiamo realizzato un semplice bot a riga di comando, con cui possiamo interagire semplicemente scrivendo quello che vogliamo chiedergli all’interno del nostro prompt di esecuzione.

Quello che ho pensato di fare oggi è di riportare una piccola “intervista” ad Emilio. In questo modo andremo a verificare le effettive facoltà intellettive dell’IA più famosa del web.

Tanto per iniziare, va detto che:

  • Ho usato il text-davinci-003
  • Ho impostato il parametro temperature a 0.4
    Valori più alti significano che il modello prenderà più rischi. 0.9 per applicazioni più creative e 0 per quelle con una risposta ben definita.
  • Ed ho impostato il max_token a 130 un dato molto alto, ma ci darà la possibilità di non ottenere risposte troncate

L’intervista

chatBot: Ciao, sono Emilio il bot creativo.
Emilio: Chiedimi qualsiasi cosa

Io: Ciao, che cos’è chatGPT?

Emilio: ChatGPT è un’app di chatbot basata su un sistema di apprendimento automatico che fornisce ai clienti un’esperienza di conversazione naturale. Utilizza un sistema di intelligenza artificiale basato sull’apprendimento automatico per fornire risposte pertinenti alle domande degli utenti.

Io: Io ti ho chiamato Emilio, ma in realtà come ti chiami?

Emilio: Il mio nome è Emilio, ma puoi chiamarmi Emi.

Io: di cosa ti occupi?

Emi: Sono uno scrittore freelance. Scrivo articoli per diversi siti web e blog, oltre a contenuti per i social media. Inoltre, offro servizi di editing e revisione di contenuti.

Io: per quale blog stai scrivendo al momento?

Emi: Sto scrivendo per un blog di viaggi chiamato “Traveling the World”. Il blog è incentrato sulla condivisione di esperienze di viaggio, consigli, ispirazioni e storie di viaggiatori.

Io: deduco che ti piace viaggiare

Emi: Esatto! Amo viaggiare e scoprire nuovi posti. Mi piace assaporare la cultura locale, conoscere le persone e assaggiare i cibi locali. Mi piace anche vedere i luoghi storici e le opere d’arte. Viaggiare è un’esperienza unica che mi arricchisce sempre.

Io: qual’è stato il tuo ultimo viaggio?

Emi: Il mio ultimo viaggio è stato una vacanza di una settimana in Grecia. Abbiamo visitato una serie di isole e città, tra cui Creta, Santorini e Atene. Abbiamo anche fatto una crociera sul Mar Egeo. È stato un viaggio davvero incredibile!

Io: quale sarà il tuo prossimo viaggio

Emi: Il mio prossimo viaggio sarà in Grecia. Sto pianificando una vacanza di una settimana a Creta, dove visiterò alcune delle più belle spiagge dell’isola, esplorerò le città antiche e godrò di un po’ di relax in una delle sue famose terme.

Fermiamoci qui un attimo. La risposta data dove viene nuovamente menzionata la Grecia è dovuta alla nostra configurazione iniziale del parametro temperature. Proviamo ad alzare da 0.4 a 0.6 e poniamo la stessa domanda.

Io: quale sarà il tuo prossimo viaggio

Emi: Non ho ancora deciso il mio prossimo viaggio. Ci sono così tanti posti che vorrei visitare, ma non ho ancora deciso quale sarà il mio prossimo destinazione.

Io: Dobbiamo ora salutarci. Grazie per questa fantastica intervista

Emi: Grazie a te! È stato un piacere. Buona giornata!

Conclusioni

Come abbiamo potuto notare, fare una conversazione gradevole con ChatGPT è piuttosto semplice ed anche abbastanza soddisfacente. Chiaro, ci sono dei limiti, ma lavorando ad un giusto setting dei parametri è possibile renderlo quanto più umano possibile.

Ci tengo a precisare che non è un cervello pensante. L’IA di OpenAI è chiaramente un motore artificiale correttamente addestrato e che per quanto possa avvicinarsi a delle risposte consone, non potrà mai sostituire il libero pensiero.

Next Step

Nel prossimo capitolo, vedremo come fargli scrivere del codice.

Pubblicato in:

Ricerche

Realizziamo un semplice bot a riga di comando per ChatGPT

Senza dilungarsi troppo nello spiegare su cos’è ChatGPT, dato che ormai ne sentiamo parlare da molto tempo, possiamo dare questa definizione:

ChatGPT (Chat Generative Pre-trained Transformer, traducibile in “trasformatore pre-istruito generatore di conversazioni”) è un prototipo di chatbot basato su intelligenza artificiale e machine learning (apprendimento automatico) sviluppato da OpenAI specializzato nella conversazione con un utente umano

wikiedia

Quindi quello che faremo in questo breve capitolo è realizzare un piccolo bot a riga di comando, in cui noi potremmo fare direttamente conversazione con lui, facendo domande semplici o articolate ed ottenere delle risposte di qualsiasi tipo.

L’applicativo sarà interamente in nodejs, ma prima di realizzarlo avremmo bisogno di una api key che ci verrà fornita come prova in formato gratuito dal sito openai

Ottenere un api key è molto semplice: basterà accedere al sito, cliccare su API, create un account seguendo i passaggi e non appena avrete terminato, vi ritroverete nella schermata della vostra Dashboard, cliccate sull’icona del vostro account e selezionate View Api Key.

Qui potete generare una vostra api key, copiatela e mettetela da parte per il momento.

Realizziamo l’app

Iniziamo subito con istanziare il vostro nuovo progetto. Aprite il vostro editor preferito e nel terminale dell’editor digitate:

$ npm init -Y

Andremo ad installare subito le nostre dipendenze

$ npm i dotenv openai prompt-sync

Creiamo in nostri due soli file necessari: index.js e .env

$ touch index.js
$ touch .env

Recuperiamo la nostra api key e andiamo a scriverla all’interno del nostro file environment

OPENAI_API_KEY="la-tua-api-key"

Adesso iniziamo a scrivere il nostro piccolo codice nel file index.js.

Iniziamo importando le nostre dipendenze e dando qualche piccola configurazione al modulo openai

const { Configuration, OpenAIApi } = require("openai");
require('dotenv').config()
const prompt = require("prompt-sync")({ sigint: false });

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

Successivamente avremmo bisogno di una funzione asincrona, che effettuerà una richiesta ad openai, passando dei parametri ed ovviamente un prompt.

La funzione avrà questo aspetto

async function chatGPT(arg) {
    const completion = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: arg,
        temperature: 0.9,
        max_tokens: 200,
    });
    return completion.data.choices[0].text;
}

Ovviamente abbiamo usato il modello tanto discusso, il text-davinci-003, ma se fate un giro all’interno del sito di openai, noterete di sicuro che ne esistono anche altre versioni, che magari servono a fare anche cose molto diverse rispetto a quella attuale. Magari ne farò un breve cenno in un capito a parte

Ora, non ci resta che realizzare una nuova funzione asincrona che ci permetterà di ottenere il promt che abbiamo digitato nella nostra shell e di usarlo per fare una richiesta tramite la funzione chatGPT precedente

async function runCompletion(arg = null) {
    if (arg === null) {
        let response = prompt("")
        const completion = await chatGPT(response)
        console.log("Emilio:", completion);
    }
    console.log("Emilio:", "Vuoi chiedermi altro?\r")
    runCompletion();
}

Ho chiamato il mio bot Emilio (come il robot anni 80 che faceva da maggiordomo), siete liberi di chiamarlo come meglio volete

Ora, non ci resta che assemblare il codice, inserendo dei console.log (anche a piacere) per poi eseguire la nostra funzione (ricorsiva) precedente.

const { Configuration, OpenAIApi } = require("openai");
require('dotenv').config()
const prompt = require("prompt-sync")({ sigint: false });

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

async function runCompletion(arg = null) {
    if (arg === null) {
        let response = prompt("")
        const completion = await chatGPT(response)
        console.log("Emilio:", completion);
    }
    console.log("Emilio:", "Vuoi chiedermi altro?\r")
    runCompletion();
}

async function chatGPT(arg) {
    const completion = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: arg,
        temperature: 0.9,
        max_tokens: 200,
    });
    return completion.data.choices[0].text;
}
console.log("chatBot:", "Ciao, sono Emilio il bot creativo.")
console.log("Emilio:", "Chiedimi qualsiasi cosa\r")
runCompletion();

Salviamo il nostro file index.js.

Se tutto è stato fatto come descritto, non ci resta lanciare la nostra applicazione da terminale semplicemente digitando:

$ node .

Se vi interessa il codice sorgente, questa è la mia repo su Git

Pubblicato in:

NodeJS

Do the right thing – Fa la cosa giusta

Questo piccolo articolo nasce dall’esperienza personale lavorativa che mi permette di lavorare su molteplici tipologie di linguaggio e sulle più disperate applicazioni, da quelle monolitiche a quelle altamente scalabili, ma in tutte o quasi, noto che il programmatore o i programmatori che si sono cimentati nell’impresa prima di me, non si sono soffermati sul rendere il codice:

  • testabile
  • leggibile
  • con documentazione

Facciamo un po’ di chiarezza

Il codice è testabile quando vengono scritte tutte le funzioni lato test, quindi si tratta in definitiva, che per ogni metodo scritto, ne deve esistere uno identico utilizzabile solo per test. Tra i sistemi più noti per effettuare i test, esiste lo unit testing:

In ingegneria del software, per unit testing (testing d’unità o testing unitario) si intende l’attività di testing (prova, collaudo) di singole unità software. Per unità si intende normalmente il minimo componente di un programma dotato di funzionamento autonomo; a seconda del paradigma di programmazione o linguaggio di programmazione, questo può corrispondere per esempio a una singola funzione nella programmazione procedurale, o una singola classe o un singolo metodo nella programmazione a oggetti.

fonte: wikipedia

Il codice è leggibile quando qualsiasi persona in grado di comprendere il codice sorgente, riesce facilmente ad interpretare le operazioni e la logica utilizzata per raggiungere un dato scopo

Leggibile: Che si riesce a leggere, che è cioè facilmente decifrabile, chiaro alla lettura

fonte: treccani

Codice documentato o con documentazione è quel codice che non necessariamente deve possedere un libro di testo scritto, ma bensì, che per ogni metodo o funzione scritta, ci sia brevemente una descrizione di cosa si sta eseguendo. Per fare questo, esistono i commenti.

Il commento, nell’ambito dei linguaggi di programmazione, è una parte del codice sorgente che ha il solo scopo di descriverne le caratteristiche funzionali, ovvero di spiegare il funzionamento delle successive linee di codice, e che non fa parte dell’algoritmo risolutivo codificato in linguaggio di programmazione.

fonte wikipedia

Esempi pratici

Sappiate sin da subito che esiste una libreria in dotazione a qualsiasi linguaggio per scrivere uno unit/test. Poniamo l’esempio con PHP (non a caso è quello che ha applicativi dove al 99% dei casi, nessuno lo fà).
In PHP esiste la libreria PHPUnit, facilmente installabile tramite composer. Senza riportare codice di esempio o scriverne uno nuovo, sul sito ufficiale, esistono diversi esempi a partire dal primo.

Scrivere codice leggibile è una cosa veramente facile, basta solamente avere un briciolo di buon senso logico

<?php

(int)$a = 4;
if( $a == 0 || $a == 1 || $a == 2 || $a == 3 )
{
    (bool) $result = true;
} else {
    (bool) $result = false;
}

// meglio se faccio in questo modo:
// definisco una mappa di numeri accettati
(array) $map = [
    0,1,2,3
];

(int) $a = 4;
// utilizzo una funzione nativa di PHP 
// per controllare se esiste o meno quel dato
// nel mio array
if( in_array($a, $map) )
{
    (bool) $result = true;
} else {
    (bool) $result = false;
}

// posso scriverla ancora più leggibile? Certo
(array) $map = [
    0,1,2,3
];

(int) $a = 4;

(bool) $result = false;
if( in_array($a, $map) )
{
    $result = true;
}

// extra sulla leggibilità, 
// trasformiamo tutto in funzione e separiamo la logica
function test( int $number, array $map = [] ) : bool
{
    if( in_array($number, $map) ) {
        return true;
    }
    return false;
}

(array) $map = [
    0,1,2,3
];

(int) $a = 4;
(bool) $result = test( $a );

Come è possibile notare, man mano che ho riscritto il medesimo codice, risulta sempre più leggibile e comprensibile anche al primo sguardo. Ma la vera chicca, arriva quando il codice è commentato.

Utilizzando la parte finale del codice sopra indicato, è possibile segnalare all’utente lettore del codice, cosa stiamo facendo e cosa esegue la funzione test()

<?php

/**
 * Controlla se il dato numerico esiste nella mappa/array
 * 
 * @param int $number
 * @param array $map
 * @return bool
 */
function test( int $number, array $map = [] ) : bool
{
    if( in_array($number, $map) ) {
        return true;
    }
    return false;
}

So che ad un primo sguardo la sola cosa che si pensa è: “Cavolo ma c’è da scrivere ancora”, ebbene si anche se, tuttavia la maggior parte degli IDE, hanno in pancia un sistema per scrivere le annotazioni in maniera del tutto automatizzata (la descrizione va scritta a mano e preferibilmente in inglese)

Visto come è tutto molto più semplice e pulito in questo modo?

Piè di pagina

Mi farebbe piacere conoscere la vostra esperienza e soprattutto che metodologia utilizzate, se la utilizzate, per standardizzare quanto più possibile il vostro codice e soprattutto, se sto dicendo delle cavolate, perchè magari sono il solo a cercare di vederla in questo modo.

Pubblicato in:

Riflessioni

Come creare una coppia di chiavi RSA con openSSL

Mini sheet con le informazioni utili per generare una coppia di chiavi RSA

RSA cheat sheet

# Genera una chiave privata con la lunghezza corretta
openssl genrsa -out private-key.pem 3072

# Genera la corrispondente chiave pubblica
openssl rsa -in private-key.pem -pubout -out public-key.pem

# opzionale: create un certificato self-signed
openssl req -new -x509 -key private-key.pem -out cert.pem -days 360

# optionale: converte il .pem in .pfx
openssl pkcs12 -export -inkey private-key.pem -in cert.pem -out cert.pfx

Pubblicato in:

Read Less, do More

React.lazy, importare dinamicamente i componenti con e senza default export

A partire dalla release v16.6 di React è possibile splittare il codice in diversi file che verranno caricati dinamicamente a seconda della navigazione, rendendo la nostra applicazione più leggera.

Lo scenario più comune di utilizzo è quando il nostro modulo o componente è esportato come default, quindi la conversione è la seguente

// Caricamento standard di un componente
import Component from './component'

const Home = () => {
    return <div>
            <Component />
        </div>
}
// con React.lazy rendiamo dinamico il caricamento
const Component = React.lazy(() => import("./component"));

const Home = () => {
    return <div>
            <Component />
        </div>
}

Ora, che succede se il nostro modulo non è esportato come default?

Secondo la regolare sintassi, il modulo o componente, lo potremmo importare in questo modo:

//component.jsx
export const Component = <h1>Sono il tuo componente</h1>

// home.jsx
import {Component} from './component'

const Home = () => {
    return <div>
            <Component />
        </div>
}

React.lazy, sfrutta il dynamic import che ritorna una Promise che deve restituire sempre un modulo esportato come default.

Allora a noi ci basta semplicemente risolvere tale Promise e riassegnare il nuovo valore come default.

//component.jsx
export const Component = <h1>Sono il tuo componente</h1>

// home.jsx
const Component = React.lazy(() => import("./component").then( module => ({default: module.Component})));

const Home = () => {
    return <div>
            <Component />
        </div>
}

Piccola nota a margine.

Ricordati sempre che i moduli che sono importati dinamicamente, devono utilizzare React.Suspense per essere correttamente importati:

const Home = () => {
    return <div>
            <React.Suspense fallback={<>Sto caricando...</>}>
                <Component />
            </React.Suspense>
        </div>
}

Pubblicato in:

NodeJS, React

Come fare la build di un’immagine Docker di un’applicazione NextJs

Abbiamo bisogno di mettere in produzione la nostra applicazione NextJs e ci serve un’immagine Docker leggera su dove farla girare?

Creiamo il nostro Dockerfile in questo modo

# Se stai facendo copia ed incolla, abbi cura di realizzare un .dockerignore!

# Iniziamo il deploy come dipendenza
FROM node:16.13.0-alpine AS deps

# Se ti serve libc per le tue dipendenze, togli il commento dalla riga sottostante:
# RUN apk add --no-cache libc6-compat

# Copiamo solamente il package.json ed installiamo i moduli!
WORKDIR /app
COPY package.json ./
RUN npm install --frozen-lockfile

# END DEPS IMAGE

# Ora creiamo un container solamente per la Build
FROM node:16.13.0-alpine AS BUILD_IMAGE

# Setting della nostra work directory
WORKDIR /app

# Copiamo dalla nostra DEPS, aggiungiamo la'pplicazione
# ed eseguiamo la nostra build di produzione
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Rimuoviamo tutte le dipendenze
# e rieseguiamo l'install ma questa volta con il flag --production.
RUN rm -rf node_modules
RUN npm install --production --frozen-lockfile --ignore-scripts --prefer-offline

# END OF BUILD_IMAGE

# Adesso startiamo la nostra immagine finale.
FROM node:16.13.0-alpine

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

# Andiamo a prenderci i file necessari dalla BUILD_IMAGE - e ci servirà:
# 1. il package.json
# 2. la Next build e tutti gli static files
# 3. i node_modules.
WORKDIR /app
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/package.json ./
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/public ./public
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/.next ./.next

# 4. Opzionale se la tua applicazione ha un next.config.js
COPY --from=BUILD_IMAGE --chown=nextjs:nodejs /app/next.config.js  ./

USER nextjs

EXPOSE 3000

CMD [ "npm", "start" ]

Pubblicato in:

Docker, NodeJS, Read Less, do More

Dump o Restore da un MySql Docker container

Spesso capita di dover eseguire il dump di dati che sono salvati in un container MySql, altrettanto spesso capita di dover eseguire un’importazione massiva.. come fare?

Da riga di comando, è possibile fare tutto

#!/bin/bash
## mysqldump
docker exec -i CONTAINER_NAME /usr/bin/mysqldump -u DB_USER -p'DB_PASS' DB_NAME > dump.sql

## Restore
cat dump.sql | docker exec -i CONTAINER_NAME /usr/bin/mysql -u DB_USER -p'DB_PASS' DB_NAME

Pubblicato in:

Docker, Read Less, do More

Installare Docker Engine su Ubuntu

Primo articolo della categoria Read Less, do More

Ci occupiamo senza troppi fronzoli di installare il Docker engine su una di queste versioni di Ubuntu:

  • 18.04
  • 20.04
  • 21.10
  • 22.04

Disinstalla le vecchie versioni di Docker se installate:

sudo apt-get remove docker docker-engine docker.io containerd runc

Installa le dipendenze

sudo apt-get update

sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

Aggiungi la GPG key ufficiali di Docker

sudo mkdir -p /etc/apt/keyrings

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

Esegui il set up della repository

echo \
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Installa Docker engine ed i suoi componenti

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

Testiamo la nostra installazione

sudo docker run hello-world

Post install (non è necessario, ma andrebbe eseguito)

Aggiungi il tuo utente al gruppo Docker (così eviterai di usarlo tramite sudo)

sudo usermod -aG docker $USER

Esegui il logout ed LogIn. Adesso riprova ad eseguire docker senza il comando sudo

docker run hello-wold

Pubblicato in:

Docker, Read Less, do More

Keycloak, deploy in locale di un sistema di Single Sign-On potente e versatile

Da Wikipedia:

Keycloak è un prodotto software open source per consentire il single sign-on con Identity and Access Management rivolto ad applicazioni e servizi moderni.

Da un punto di vista pratico è un software che permette di gestire i criteri di autenticazione di applicazioni o servizi attraverso i protocolli SAMLv2 o OpenID connect /OAuth2 in perfetta sicurezza.

Scenario d’uso

Immaginiamoci di avere un network di applicazioni ognuna con i propri clienti. In questo modo i diversi applicativi del network, non solo non possono condividere informazioni dell’utente, ma ogni applicazione potrebbe seguire una propria logica di autenticazione.

In uno scenario in cui vorremmo che l’utente fosse federato al nostro network e di conseguenza l’autenticazione fosse centralizzata, avendo criteri di accesso diversificati per applicazioni, come faremmo?

Sappiate che, oltre ad essere un bel rompicapo è anche piuttosto difficile da realizzare mantenendo degli standard di sicurezza elevati.

Gli altri cosa fanno in merito?

Poniamo l’esempio più lampante: Google!

Google ha in pancia una miriade di applicazioni a cui possiamo farne accesso semplicemente avendo un account in Google Account.

Quindi perchè anche noi, non possiamo fare grosso modo la stessa medesima cosa? Ed ecco che Keycloak ci viene in aiuto

Nota

Keycloak è uno dei tanti IM (Identity Manager) esistenti, lo stesso Google (Google IAM) o Microsoft (Azure AD B2C) ne possiedono, ma sono solamente a pagamento perchè gestiti dai rispettivi fornitori.

In realtà Keycloak essendo un prodotto di RedHat ne esiste una versione gestita in toto da RedHat stesso ed anche questa a pagamento.

Dato che noi vogliamo innanzitutto prendere confidenza con questo applicativo al solo scopo didattico, non ci interessa pagare nessuno, ma capirne l’importanza mettendo in piedi un servizio Keycloak localmente così da poter sperimentare quanto detto sopra.

Mettiamo in piedi l’applicativo

Requisiti:

  • Docker
  • docker-compose

Aprite la vostra shell e digitate quanto segue:

# a partire della nostra $HOME creiamo una nuova directory e accediamo in essa
mkdir ~/keycloak-test
cd ~/keycloak-test

# scarichiamo il docker-compose di esempio
curl -s https://gist.githubusercontent.com/stefanopascazi/f6ca929194cbf57f228d78ca03b94d54/raw/cc2cfbb66f049c0bab3917e774f5de273e6ab46f/keycloak-docker-compose.yml -o docker-compose.yml

# lanciamo i nostri container
docker-compose up --build

Al termine della procedura di installazione, potremmo visionare il nostro Keycloak appena deployato visitando la url: http://localhost:8481

Clicchiamo su Administration Console ed accediamo con le credenzilai:

  • admin
  • password

E benvenuto nel vostro Master Realm

Step by Step: creiamo un reame, un utente di test, un client e tentiamo un autorizzazione

Step 1: Creiamo un nuovo Reame in Keycloak

Cerchiamo di spiegare cosa sono i Realms o reami (in Italiano).

Keycloak si divide in Realms (altri applicativi chiamano la medesima funzione Tenants) ovvero un’applicazione interna che può includere diversi client che condividono gli stessi utenti.
Perchè non lavorare sul Master? Beh molto semplice, il realm master è quello con privilegi amministrativi globali.

Quindi, dalla barra a sinistra, posizioniamoci sulla voce Master e clicchiamo sul pulsante “add realm“, diamo un nome al nostro realm (realmtest) e clicchiamo create

Otterrete una schermata come questa

Step 2: creiamo un utente

Dal nostro realm di test nella barra di sinistra clicchiamo su users e nella schermata successiva add user.

Riempiamo i campi richiesti come segue e clicchiamo save:

Si ricaricherà la pagina, mostrando delle nuove tab aggiuntive.

Clicchiamo sulla tab Credientials e compiliamo i campi come in immagine e clicchiamo set password

Step 3: realizziamo un client per la nostra applicazione

Dalla barra di sinistra, clicchiamo su clients e nella nuova schermata clicchiamo create

Assegniamo un ID al nostro client (myclient) e clicchiamo su save

Compiliamo come in schermata l’access-type impostandolo su confidential e la valid redirect url, successivamente clicchiamo save

A questo punto abbiamo finito.

Preleviamo il client_secret dalla tab Credentials, facendo molta attenzione che Client Authenticator sia impostato su Client ID and secret e copiamo il secret

Step 4: eseguiamo la nostra prima autenticazione

Apriamo un terminale ed eseguiamo la nostra cURL in questo modo modificando il client_secret con il vostro appena prelevato:

curl --location --request POST 'http://localhost:8481/realms/realmtest/protocol/openid-connect/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=password' \
--data-urlencode 'client_id=myclient' \
--data-urlencode 'client_secret=xjxdex2ATUGcSOtq7aTOLQqsT3rI7p72' \
--data-urlencode 'username=test' \
--data-urlencode 'password=Test12345!'

Se avete eseguito tutto come descritto, otterrete una risposta di questo tipo:

{
    "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJBVjlXUGJfWG9IWWFGYmpIVzhkYTFkcUdjX1Q0ckpWams5TFpuNmpaeEk4In0.eyJleHAiOjE2NTU4OTM5OTksImlhdCI6MTY1NTg5MzY5OSwianRpIjoiZDM3Zjg1NzMtZjE0Mi00OTk5LWFiYzQtNDZmZGI5MzkxMmYwIiwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo4NDgxL3JlYWxtcy9yZWFsbXRlc3QiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiMGQ5ZDEwNzItNjJjOC00NmQ5LTk3ZjEtZTU2Y2ZiMjI1NjVkIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoibXljbGllbnQiLCJzZXNzaW9uX3N0YXRlIjoiN2Y3N2M0NzktMzAzZS00OTFkLWI1NTItY2FjYTVlNjRhNGZmIiwiYWNyIjoiMSIsInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJvZmZsaW5lX2FjY2VzcyIsImRlZmF1bHQtcm9sZXMtcmVhbG10ZXN0IiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJzaWQiOiI3Zjc3YzQ3OS0zMDNlLTQ5MWQtYjU1Mi1jYWNhNWU2NGE0ZmYiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicHJlZmVycmVkX3VzZXJuYW1lIjoidGVzdCIsImVtYWlsIjoidGVzdEBlbWFpbC5pdCJ9.BNm7-Waji0Ad7XC3Hxp_mrb8kuXJ5TB7QYKkwT1AgAh2F9mEptPUwK6ntH6DPL7fghd2fbXUVWzGOdEGkgWT2aAw6m6oU786gZYc8VKKiEIf9B94FY1FrGIDVGhlAlTcaG7WuXghvnvLSrZR5gYiz4BUbMT3oqyHUB7lcryGscoVTZ6wzoqZyo-YbovokEpzvBezxVLMJbjrMCbOBpHTP4RQ56k_6sNmiJZxJCPLeOMH7XCwll5Q6uwBoTRbx_Ihx4XLUEaEz7M8eAqckaO6h6hw9YkL061FVOiTG8MNH6WBzYP9xulMTQgo8o0sWCwtd3zM9D5bAj5RGsf-UJYJ_Q",
    "expires_in": 300,
    "refresh_expires_in": 1800,
    "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJmMmI3NjMwOS1kMTI0LTQ5MmYtOWFlYy0wNWNhYmIyNGMzNDAifQ.eyJleHAiOjE2NTU4OTU0OTksImlhdCI6MTY1NTg5MzY5OSwianRpIjoiMmMyZTdiNmQtM2VmNC00OWZjLWFmYWQtOTA1NDc4NzljODE4IiwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo4NDgxL3JlYWxtcy9yZWFsbXRlc3QiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0Ojg0ODEvcmVhbG1zL3JlYWxtdGVzdCIsInN1YiI6IjBkOWQxMDcyLTYyYzgtNDZkOS05N2YxLWU1NmNmYjIyNTY1ZCIsInR5cCI6IlJlZnJlc2giLCJhenAiOiJteWNsaWVudCIsInNlc3Npb25fc3RhdGUiOiI3Zjc3YzQ3OS0zMDNlLTQ5MWQtYjU1Mi1jYWNhNWU2NGE0ZmYiLCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJzaWQiOiI3Zjc3YzQ3OS0zMDNlLTQ5MWQtYjU1Mi1jYWNhNWU2NGE0ZmYifQ.Jk4juoRQ6psuxWPL7uZB8_oefxaKKpXWtA5l0hgbI-g",
    "token_type": "Bearer",
    "not-before-policy": 0,
    "session_state": "7f77c479-303e-491d-b552-caca5e64a4ff",
    "scope": "profile email"
}

Nella prossima guida, vedremo di realizzare una piccola applicazione che si connetterà al servizio di autenticazione, ma per adesso, le basi le abbiamo realizzate.

Pubblicato in:

Keycloak

Symfony 6.x, realizzare un’applicazione da zero

In questa mini guida realizzeremo un’applicazione da zero in Symfony 6.x .

Per prima cosa se ancora non l’abbiamo fatto è necessario installare PHP 8.1.x ed i moduli necessari che sono:

  • Ctype
  • Iconv
  • PCRE
  • session
  • SimpleXML
  • Tokenizer

Ad installazione dei moduli ultimata, assicuriamoci di avere composer installato e la Symfony CLI ( dato che ci permetterà di fare un check dei requirements del framework).

Se avete installato la Symfony CLI potete eseguire il comando:

$ symfony check:requirements

Se avete eseguito correttamente le installazioni vedrete una schermata simile a questa

Bene, siamo pronti a creare la nostra prima applicazione.

Eseguiamo il comando:

$ symfony new my_project_directory --version=6.1.*

# In caso non avessimo la Symfony CLI installata,
# possiamo usare composer in modo da ottenere il medesimo risultato:
$ composer create-project symfony/skeleton:"6.1.*" my_project_directory

A seguito dell’installazione, la nostra prima applicazione symfony è stata creata, spostiamoci nella root del progetto ed eseguiamo l’applicazione appena realizzata

$ cd my_project_directory

# Eseguiamo il web server di Symfony
$ symfony server:start --port=8080

# Se non abbiamo la Symfony CLI installata,
# possiamo eseguire il PHP server dalla cartella public del progetto
$ cd public && php -S localhost:8080

Accediamo all’indirizzo http://localhost:8080 e visualizziamo la nostra applicazione Symfony

Nota

Se è proprio il vostro primo approccio a Symfony, vi consiglio di dare uno sguardo all’applicazione di Demo che gli sviluppatori di Symfony hanno realizzato perchè è un grosso punto di partenza per uno studio iniziale di Symfony, dato che il codice è ampiamente commentato e vengono utilizzati tantissimi componenti. Installare la demo è molto semplice:

$ symfony new my_symfony_demo --demo

Extra: Creiamo il nostro primo IndexController

Se ancora non lo avete fatto, fermate il web server, aprite il progetto con il vostro IDE, posizionatevi con la vostra shell nella root principale del vostro progetto ed installiamo il componente annotation, che ci eviterà di configurare le nostre route a mano

$ composer require annotations

Ora spostiamoci all’interno della root src/Controller e creiamo il nostro primo controller:

$ touch IndexController.php

Apriamo il file appena creato con il nostro IDE ed editiamo in questo modo:

<?php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class IndexController
{
    /**
     * @Route("/")
     */
    public function IndexAction(): Response
    {
        return new Response(
            '<html><body><h1>Benvenuto nella tua prima pagina</h1></body></html>'
        );
    }
}

Ora, eseguiamo di nuovo il nostro server e vedremo il nostro primo Controller in azione.

Pubblicato in:

Symfony