**Nota per le app iOS:** iOS: se l'utente passa all'app Frame.io per inserire il codice di associazione, la tua app potrebbe passare in background. Quando torna attiva, ad esempio tramite `applicationDidBecomeActive`, riprendi il polling in modo che il flusso di autorizzazione possa proseguire senza richiedere una nuova procedura di associazione.Se ricevi: ``` { "error": "expired_token" } ``` Il codice è scaduto prima dell'inserimento da parte dell'utente. Genera un nuovo codice o codice QR tramite il passaggio 1, mostralo all'utente e riprendi il polling. Un'autorizzazione riuscita produce: ``` { "access_token": "[access_token]", "expires_in": 28800, "refresh_token": "[refresh_token]", "token_type": "bearer" } ``` Complimenti per aver autorizzato il tuo dispositivo Camera to Cloud! Esaminiamo questa risposta: * **access_token**: le tue credenziali di autenticazione per l'accesso al backend Frame.io, richieste nelle intestazioni per le future richieste API. * **expires_in**: il periodo di validità del token di accesso in secondi, dopo il quale è necessario l'aggiornamento. * **refresh_token**: utilizzato per la gestione del token di accesso, principalmente per l'aggiornamento dell'autorizzazione ma applicabile anche per la revoca. * **token_type**: è sempre `bearer` per le implementazioni dell'API C2C; non richiede alcuna azione. ## Abbinamento dei passaggi Ora implementiamo queste chiamate API in uno pseudocodice simile a Python, gestendo la potenziale scadenza del codice dispositivo: **`Python`** ```python title="Python" def authorize_with_frame(): """ Handles authorizing our device with Frame.io. """ # Our client ID can be a serial number, UUID, or some other unique string. client_id = THIS_DEVICE.get_serial_number() while True: # Make the call to Frame.io to get our device codes. pairing_codes = c2c.get_device_codes(client_id) # We need to keep track of how long we have been polling for polling_started = datetime.now() # Now we are going to poll for authorization until the user enters the code. while True: # Re-write this output each time we poll. Note: This message will only update once # per `interval` (e.g., 5 seconds), so if a smooth countdown is desired, that will # need a different implementation. print( f"\rPAIRING CODE: {pairing_codes.user_code}, " f"EXPIRES IN: {pairing_codes.expires_in - (datetime.now() - polling_started).seconds} seconds" ) # Wait for `interval` before polling each time. sleep(pairing_codes.interval) # Make a call to Frame.io to see if the user has entered the code and authorized # the device. authorization, error = c2c.poll_for_authorization( client_id, pairing_codes.device_code ) if error and error.message == "authorization_pending": # If the authorization is pending, try again. continue elif error and error.message == "expired_token": # If the pairing codes have expired, break to generate new codes. break elif error: # If there was some other error, raise it. raise error else: # If there was no error, we have our authorization! return authorization # If we get here, our pairing codes expired. Let's try again. print("\nPairing code expired. Generating a new one...") ``` **Nota:** l'outer loop gestisce i casi in cui i codici di associazione scadono e sono necessari nuovi codici. Come passaggio finale, recupera e visualizza le informazioni del progetto da Frame.io per confermare che l'associazione al progetto previsto sia riuscito. Vedremo come farlo nell'esercitazione successiva. ## Crea e visualizza codici QR per l'associazione Durante l'implementazione dell'associazione tramite URL/codice QR, dovrai generare un codice QR dal valore `verification_uri_complete` nella risposta. Ecco alcuni esempi che utilizzano librerie popolari in diversi linguaggi di programmazione: ### Esempio Python con qrcode **`Python`** ```python title="Python" import qrcode from PIL import Image import io def generate_qr_code(verification_uri_complete, size=250): """ Generate a QR code from the verification_uri_complete URL. Args: verification_uri_complete (str): The complete verification URI returned by Frame.io size (int, optional): Size of the QR code in pixels. Defaults to 250. Returns: PIL.Image: QR code image that can be displayed or saved """ qr = qrcode.QRCode( version=1, error_correction=qrcode.constants.ERROR_CORRECT_L, box_size=10, border=4, ) qr.add_data(verification_uri_complete) qr.make(fit=True) img = qr.make_image(fill_color="black", back_color="white") # Resize the image if needed img = img.resize((size, size)) return img # Example usage in authorization flow def display_qr_for_pairing(pairing_codes): """ Generate and display QR code along with manual pairing instructions. """ if hasattr(pairing_codes, 'verification_uri_complete'): # Generate QR code from the verification URI qr_img = generate_qr_code(pairing_codes.verification_uri_complete) # Display the QR code on screen # For GUI applications like Tkinter, PyQt, etc. # display_image(qr_img) # For headless devices or testing, save to file qr_img.save("frame_io_pairing_qr.png") print(f"Scan the QR code or visit: {pairing_codes.verification_uri}") print(f"Manual code: {pairing_codes.user_code}") else: # Fallback for devices that received traditional pairing response print(f"Enter code on Frame.io: {pairing_codes.user_code}") ``` ### Esempio JavaScript (web o Electron) ```javascript import QRCode from 'qrcode'; /** * Generate and display a QR code from the verification URI * @param {string} verificationUriComplete - The complete verification URI from Frame.io * @param {string} elementId - ID of the HTML element to display the QR code in */ function displayQRCode(verificationUriComplete, elementId = 'qrcode-container') { const element = document.getElementById(elementId); if (!element) { console.error(`Element with ID ${elementId} not found`); return; } // Clear any existing content element.innerHTML = ''; // Generate QR code QRCode.toCanvas(element, verificationUriComplete, { width: 250 }, function(error) { if (error) { console.error('Error generating QR code:', error); // Fallback to displaying the URL as a link element.innerHTML = `Click here to pair`; } }); // Also display manual pairing information const manualInfoDiv = document.createElement('div'); manualInfoDiv.innerHTML = `
Scan the QR code or click here to pair your device.
Manual code: ${userCode}
`; element.parentNode.appendChild(manualInfoDiv); } // Example usage in authorization flow async function requestDeviceCode() { try { const response = await fetch('https://api.frame.io/v2/auth/device/code', { method: 'POST', headers: { 'x-client-version': '2.0.0', 'x-client-platypus-enabled': 'true' }, body: new URLSearchParams({ 'client_id': YOUR_CLIENT_ID, 'client_secret': YOUR_CLIENT_SECRET, 'scope': 'asset_create offline' }) }); const data = await response.json(); if (data.verification_uri_complete) { displayQRCode(data.verification_uri_complete); window.userCode = data.user_code; // Store for display purposes } else { // Fallback for traditional pairing displayManualPairingCode(data.user_code); } // Begin polling for authorization beginPollingForAuthorization(data.device_code, data.interval); } catch (error) { console.error('Error requesting device code:', error); } } ``` ### Esempio Android (Java) ```java import android.graphics.Bitmap; import android.widget.ImageView; import com.google.zxing.BarcodeFormat; import com.google.zxing.MultiFormatWriter; import com.google.zxing.common.BitMatrix; import com.journeyapps.barcodescanner.BarcodeEncoder; public void generateAndDisplayQRCode(String verificationUriComplete, ImageView qrCodeImageView) { try { MultiFormatWriter multiFormatWriter = new MultiFormatWriter(); BitMatrix bitMatrix = multiFormatWriter.encode(verificationUriComplete, BarcodeFormat.QR_CODE, 250, 250); BarcodeEncoder barcodeEncoder = new BarcodeEncoder(); Bitmap bitmap = barcodeEncoder.createBitmap(bitMatrix); // Display in ImageView qrCodeImageView.setImageBitmap(bitmap); } catch (Exception e) { e.printStackTrace(); // Fallback to displaying the URL as text } } ``` ### Esempio iOS (Swift) ```swift import UIKit import CoreImage func generateQRCode(from string: String) -> UIImage? { let data = string.data(using: String.Encoding.utf8) if let filter = CIFilter(name: "CIQRCodeGenerator") { filter.setValue(data, forKey: "inputMessage") filter.setValue("H", forKey: "inputCorrectionLevel") if let outputImage = filter.outputImage { // Scale the image let transform = CGAffineTransform(scaleX: 10, y: 10) let scaledImage = outputImage.transformed(by: transform) // Convert to UIImage let context = CIContext() if let cgImage = context.createCGImage(scaledImage, from: scaledImage.extent) { return UIImage(cgImage: cgImage) } } } return nil } // Usage in your view controller func displayPairingQRCode(verificationUriComplete: String) { if let qrCodeImage = generateQRCode(from: verificationUriComplete) { qrCodeImageView.image = qrCodeImage // Also show manual pairing information pairingInstructionsLabel.text = "Scan the QR code or enter code manually" pairingCodeLabel.text = userCode } else { // Fallback to manual code display pairingInstructionsLabel.text = "Enter this code on Frame.io:" pairingCodeLabel.text = userCode } } ``` ## Best practice per la visualizzazione del codice QR Quando implementi l'associazione tramite codice QR, considera queste linee guida per offrire la migliore esperienza agli utenti: 1. **Dimensioni ottimali**: visualizza codici QR di almeno 200-250 px quadrati per una scansione affidabile. 2. **Contrasto**: assicurati che ci sia un contrasto elevato tra codice QR e sfondo (nero su bianco è l'ideale). 3. **Correzione degli errori**: usa livelli di correzione degli errori moderati (L o M) per bilanciare densità del codice e affidabilità. 4. **Istruzioni chiare**: fornisci indicazioni chiare su come eseguire la scansione del codice, ad esempio "Scansiona questo codice con la fotocamera dello smartphone per associare il dispositivo." 5. **Opzioni multiple**: fornisci sempre il codice di associazione manuale insieme al codice QR come alternativa: ``` Scan to pair: [QR CODE] Or enter code manually: 573131 ``` 6. **Link ipertestuale per app mobili**: se la tua integrazione è un'app mobile, includi `verification_uri_complete` come link toccabile, poiché gli utenti non possono scansionare un codice QR dallo stesso dispositivo. 7. **Test**: testa i codici QR con vari dispositivi e condizioni di illuminazione per garantire una scansione affidabile.  ## Risoluzione dei problemi Se riscontri problemi, consulta questi scenari e soluzioni comuni: * **Pulsante "Collega dispositivo" non visibile**: quando accedi al pannello di gestione C2C, questo potrebbe indicare: * **Autorizzazioni insufficienti**: se visualizzi un messaggio relativo alle autorizzazioni, contatta il tuo account manager per modificare le autorizzazioni o assegnare un ruolo appropriato. * **Connessione al dispositivo esistente**: dopo aver collegato un dispositivo, il pulsante principale "Aggiungi nuovo dispositivo" viene sostituito da un menu con tre puntini nell'angolo superiore destro del pannello Connessioni C2C. * **Errore di client non valido**: una risposta `invalid_client` indica una mancata corrispondenza delle informazioni del dispositivo, solitamente dovuta a un `client_secret` errato. * **Errore di richiesta non valida**: una risposta `bad_request` indica che il formato dei dati della richiesta è errato.Verifica i nomi dei campi e assicurati che tutti i campi obbligatori siano inclusi. Se il problema non è trattato qui, condividi la tua esperienza per aiutarci a migliorare questa sezione di risoluzione dei problemi. ## Passaggi successivi Ti invitiamo a contattare il nostro team e a procedere alla [guida sulla gestione delle autorizzazioni](./how-to-authorization-management). Facci avere il tuo feedback!