OAuth Integration

Bygg sikre integrasjoner med Shoporama API ved hjelp av OAuth 2.0

Hva er OAuth?

OAuth gir eksterne applikasjoner sikker tilgang til Shoporama API på vegne av brukerne dine uten å dele påloggingsinformasjonen deres.

Trygt og sikkert

Ingen deling av passord. Brukere logger inn direkte på Shoporama

Enkel integrering

Standard OAuth 2.0-flyt som du kjenner fra andre tjenester

Fleksibel

Velg nøyaktig hvilke rettigheter appen din skal ha

OAuth Flow - trinn for trinn

1

Send bruker til Shoporama

Appen din sender brukeren til Shoporamas OAuth-sluttpunkt

https://www.shoporama.dk/admin/oauth/login?
  client_id=Din_App_Navn
  redirect_uri=https://example.com/callback
  state=unik_session_id

2

Bruker logger inn

Brukeren logger inn med Shoporama-legitimasjonen sin og velger:

Hvilken butikk du skal gi tilgang til
Tilgangsnivå (lese-, skrive- eller full tilgang)

3

Motta API-token

Etter autentisering sendes brukeren tilbake til appen din med tokenet:

https://example.com/callback?
  token=4e5cc874fce61c4e7e69...
  shop_url=demo.shoporama.dk
  shop_name=Demo Shop
  api_endpoint=https://www.shoporama.dk/REST
  webshop_id=1
  access_level=all
  state=unik_session_id

4

Bruk API-et

Bruk tokenet til å ringe Shoporama API:

curl -H "Authorization: 4e5cc874fce61c4e7e69..." \
     https://www.shoporama.dk/REST/product

Er du klar til å komme i gang?

Begynn med å teste OAuth-flyten, eller les mer om API-et

Test OAuth-flyten Les API-dokumentasjon

Komplette Implementeringseksempler

Fuld OAuth flow implementation - klar til copy/paste

Vanilla PHP Implementation

Ren PHP uden frameworks - en enkelt fil der håndterer hele OAuth flowet

<?php
// oauth.php - Gem denne fil på din server
session_start();

// Konfiguration - RET DISSE VÆRDIER
$CLIENT_ID = "Dit App Navn";
$REDIRECT_URI = "https://din-side.dk/oauth.php";
$OAUTH_URL = "https://www.shoporama.dk/admin/oauth/login";

// Start OAuth
if (isset($_GET["login"])) {
    $_SESSION["state"] = bin2hex(random_bytes(16));
    $url = $OAUTH_URL . "?" . http_build_query([
        "client_id" => $CLIENT_ID,
        "redirect_uri" => $REDIRECT_URI,
        "state" => $_SESSION["state"]
    ]);
    header("Location: $url");
    exit;
}

// Modtag token
if (isset($_GET["token"]) && $_GET["state"] === $_SESSION["state"]) {
    $_SESSION["token"] = $_GET["token"];
    $_SESSION["api_url"] = $_GET["api_endpoint"];
    echo "Success! Token gemt.";
    echo "
Test API";
    exit;
}

// Test API
if (isset($_GET["test"]) && isset($_SESSION["token"])) {
    $ch = curl_init($_SESSION["api_url"] . "/product?limit=1");
    curl_setopt($ch, CURLOPT_HTTPHEADER, ["Authorization: " . $_SESSION["token"]]);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $result = curl_exec($ch);
    echo "" . htmlspecialchars($result) . "";
    exit;
}

// Start side
echo "Login med Shoporama";
?>

Sådan bruger du det:

Kopier koden til en fil kaldet oauth.php
Ret $CLIENT_ID og $REDIRECT_URI
Upload filen til din server
Besøg siden og klik "Login med Shoporama"

Laravel Implementation

OAuth implementation med Laravel framework - professionel og skalerbar løsning

<?php
// routes/web.php
use App\Http\Controllers\OAuthController;

Route::get("/oauth/start", [OAuthController::class, "start"])->name("oauth.start");
Route::get("/oauth/callback", [OAuthController::class, "callback"])->name("oauth.callback");
Route::get("/api/products", [OAuthController::class, "getProducts"])->middleware("auth.oauth");

// app/Http/Controllers/OAuthController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Str;

class OAuthController extends Controller
{
    private $config;
    
    public function __construct()
    {
        $this->config = [
            "client_id" => config("services.shoporama.client_id", "Min Laravel App"),
            "redirect_uri" => route("oauth.callback"),
            "oauth_endpoint" => "https://www.shoporama.dk/admin/oauth/login"
        ];
    }
    
    public function start(Request $request)
    {
        // Generer state for CSRF beskyttelse
        $state = Str::random(40);
        $request->session()->put("oauth_state", $state);
        
        // Byg OAuth URL
        $params = [
            "client_id" => $this->config["client_id"],
            "redirect_uri" => $this->config["redirect_uri"],
            "state" => $state
        ];
        
        $authUrl = $this->config["oauth_endpoint"] . "?" . http_build_query($params);
        
        return redirect($authUrl);
    }
    
    public function callback(Request $request)
    {
        // Håndter fejl
        if ($request->has("error")) {
            return redirect()->route("login")->with("error", 
                "OAuth fejl: " . $request->get("error_description", "Ukendt fejl")
            );
        }
        
        // Verificer state
        if ($request->get("state") !== $request->session()->get("oauth_state")) {
            return redirect()->route("login")->with("error", "Ugyldig state parameter");
        }
        
        // Gem token data
        $tokenData = [
            "token" => $request->get("token"),
            "shop_url" => $request->get("shop_url"),
            "shop_name" => $request->get("shop_name"),
            "api_endpoint" => $request->get("api_endpoint"),
            "webshop_id" => $request->get("webshop_id"),
            "access_level" => $request->get("access_level"),
            "granted_at" => now()
        ];
        
        // Gem i database
        auth()->user()->update([
            "shoporama_token" => encrypt(json_encode($tokenData))
        ]);
        
        // Ryd state
        $request->session()->forget("oauth_state");
        
        return redirect()->route("dashboard")->with("success", 
            "Forbundet til " . $tokenData["shop_name"]
        );
    }
    
    public function getProducts(Request $request)
    {
        $user = auth()->user();
        
        if (!$user->shoporama_token) {
            return response()->json(["error" => "Not authenticated"], 401);
        }
        
        $tokenData = json_decode(decrypt($user->shoporama_token), true);
        
        $response = Http::withHeaders([
            "Authorization" => $tokenData["token"],
            "Accept" => "application/json"
        ])->get($tokenData["api_endpoint"] . "/product", [
            "limit" => 10
        ]);
        
        if ($response->successful()) {
            return response()->json($response->json());
        }
        
        return response()->json(["error" => "API request failed"], $response->status());
    }
}
?>

Laravel Features:

Bruger Laravel's built-in session og encryption
Tokens gemmes krypteret i databasen
Middleware for at beskytte routes
Konfiguration via .env fil
HTTP client med fejlhåndtering

Frontend JavaScript Implementation

En komplet HTML side med JavaScript OAuth flow - ingen server kode nødvendig

<!DOCTYPE html>
<html>
<head>
    <title>Shoporama OAuth Demo</title>
</head>
<body>
    <div id="app">
        <button onclick="startOAuth()">Login med Shoporama</button>
        <div id="result"></div>
    </div>

    <script>
    // Konfiguration - RET DISSE
    const CLIENT_ID = "Dit App Navn";
    const REDIRECT_URI = window.location.origin + window.location.pathname;
    const OAUTH_URL = "https://www.shoporama.dk/admin/oauth/login";
    
    // Start OAuth
    function startOAuth() {
        const state = Math.random().toString(36).substring(7);
        sessionStorage.setItem("oauth_state", state);
        
        const params = new URLSearchParams({
            client_id: CLIENT_ID,
            redirect_uri: REDIRECT_URI,
            state: state
        });
        
        window.location.href = `${OAUTH_URL}?${params}`;
    }
    
    // Check for OAuth callback
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get("token")) {
        const state = urlParams.get("state");
        const savedState = sessionStorage.getItem("oauth_state");
        
        if (state === savedState) {
            // Gem token data
            const tokenData = {
                token: urlParams.get("token"),
                api_endpoint: urlParams.get("api_endpoint"),
                shop_name: urlParams.get("shop_name")
            };
            
            localStorage.setItem("shoporama_oauth", JSON.stringify(tokenData));
            sessionStorage.removeItem("oauth_state");
            
            // Vis success
            document.getElementById("result").innerHTML = `
                <h2>Success!</h2>
                <p>Logget ind på: ${tokenData.shop_name}</p>
                <button onclick="testAPI()">Test API</button>
            `;
            
            // Ryd URL
            window.history.replaceState({}, document.title, window.location.pathname);
        }
    }
    
    // Test API
    async function testAPI() {
        const data = JSON.parse(localStorage.getItem("shoporama_oauth"));
        if (!data) return alert("Ikke logget ind");
        
        try {
            const response = await fetch(data.api_endpoint + "/product?limit=1", {
                headers: { "Authorization": data.token }
            });
            const products = await response.json();
            document.getElementById("result").innerHTML += 
                "<pre>" + JSON.stringify(products, null, 2) + "</pre>";
        } catch (error) {
            alert("API fejl: " + error.message);
        }
    }
    </script>
</body>
</html>

Bemærk om CORS:

Frontend JavaScript kan opleve CORS problemer ved API kald. For produktion anbefales en backend proxy eller officielle CORS headers fra Shoporama.

Node.js/Express Implementation

Server-side JavaScript implementation med Express.js

const express = require('express');
const session = require('express-session');
const crypto = require('crypto');
const app = express();

// Session setup
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true
}));

// OAuth konfiguration
const OAUTH_CONFIG = {
    client_id: 'Min Shoporama App',
    redirect_uri: 'https://example.com/oauth/callback',
    oauth_endpoint: 'https://www.shoporama.dk/admin/oauth/login'
};

// Start OAuth flow
app.get('/oauth/start', (req, res) => {
    // Generer state til CSRF beskyttelse
    const state = crypto.randomBytes(16).toString('hex');
    req.session.oauth_state = state;
    
    // Byg OAuth URL
    const params = new URLSearchParams({
        client_id: OAUTH_CONFIG.client_id,
        redirect_uri: OAUTH_CONFIG.redirect_uri,
        state: state
    });
    
    const authUrl = `${OAUTH_CONFIG.oauth_endpoint}?${params}`;
    res.redirect(authUrl);
});

// OAuth callback handler
app.get('/oauth/callback', (req, res) => {
    const { token, state, error, error_description } = req.query;
    
    // Håndter fejl
    if (error) {
        console.error('OAuth Error:', error, error_description);
        return res.status(400).json({
            error: error,
            description: error_description
        });
    }
    
    // Verificer state
    if (state !== req.session.oauth_state) {
        return res.status(400).json({
            error: 'Invalid state parameter'
        });
    }
    
    // Gem token data
    req.session.oauth_token = {
        token: token,
        shop_url: req.query.shop_url,
        shop_name: req.query.shop_name,
        api_endpoint: req.query.api_endpoint,
        webshop_id: req.query.webshop_id,
        access_level: req.query.access_level,
        granted_at: new Date()
    };
    
    // Ryd state
    delete req.session.oauth_state;
    
    // Success response
    res.json({
        success: true,
        shop_name: req.query.shop_name,
        access_level: req.query.access_level
    });
});

// API kald med OAuth token
app.get('/api/products', async (req, res) => {
    if (!req.session.oauth_token) {
        return res.status(401).json({ error: 'Not authenticated' });
    }
    
    try {
        const response = await fetch(
            `${req.session.oauth_token.api_endpoint}/product?limit=10`,
            {
                headers: {
                    'Authorization': req.session.oauth_token.token,
                    'Accept': 'application/json'
                }
            }
        );
        
        const data = await response.json();
        res.json(data);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.listen(3000, () => {
    console.log('OAuth app running on port 3000');
});

Installation:

npm install express express-session
node app.js

Python/Flask Implementation

Python implementation med Flask framework

from flask import Flask, redirect, request, session, jsonify
import secrets
import requests
from urllib.parse import urlencode

app = Flask(__name__)
app.secret_key = 'your-secret-key'

# OAuth konfiguration
OAUTH_CONFIG = {
    'client_id': 'Min Shoporama App',
    'redirect_uri': 'https://example.com/oauth/callback',
    'oauth_endpoint': 'https://www.shoporama.dk/admin/oauth/login'
}

@app.route('/oauth/start')
def oauth_start():
    # Generer state til CSRF beskyttelse
    state = secrets.token_urlsafe(16)
    session['oauth_state'] = state
    
    # Byg OAuth URL
    params = {
        'client_id': OAUTH_CONFIG['client_id'],
        'redirect_uri': OAUTH_CONFIG['redirect_uri'],
        'state': state
    }
    
    auth_url = f"{OAUTH_CONFIG['oauth_endpoint']}?{urlencode(params)}"
    return redirect(auth_url)

@app.route('/oauth/callback')
def oauth_callback():
    # Hent parametre
    token = request.args.get('token')
    state = request.args.get('state')
    error = request.args.get('error')
    error_description = request.args.get('error_description')
    
    # Håndter fejl
    if error:
        return jsonify({
            'error': error,
            'description': error_description
        }), 400
    
    # Verificer state
    if state != session.get('oauth_state'):
        return jsonify({'error': 'Invalid state parameter'}), 400
    
    # Gem token data
    session['oauth_token'] = {
        'token': token,
        'shop_url': request.args.get('shop_url'),
        'shop_name': request.args.get('shop_name'),
        'api_endpoint': request.args.get('api_endpoint'),
        'webshop_id': request.args.get('webshop_id'),
        'access_level': request.args.get('access_level')
    }
    
    # Ryd state
    session.pop('oauth_state', None)
    
    return jsonify({
        'success': True,
        'shop_name': session['oauth_token']['shop_name'],
        'access_level': session['oauth_token']['access_level']
    })

@app.route('/api/products')
def get_products():
    # Check authentication
    if 'oauth_token' not in session:
        return jsonify({'error': 'Not authenticated'}), 401
    
    # Kald Shoporama API
    token_data = session['oauth_token']
    headers = {
        'Authorization': token_data['token'],
        'Accept': 'application/json'
    }
    
    response = requests.get(
        f"{token_data['api_endpoint']}/product?limit=10",
        headers=headers
    )
    
    if response.status_code == 200:
        return jsonify(response.json())
    else:
        return jsonify({'error': 'API request failed'}), response.status_code

if __name__ == '__main__':
    app.run(debug=True)

Installation:

pip install flask requests
python app.py

Feilsøking og vanlige problemer

Vanlige OAuth-feil

access_denied

Brukeren ble nektet tilgang. Vis en vennlig melding og la dem prøve igjen.

invalid_client

Ukjent client_id. Kontroller at appnavnet ditt er riktig.

invalid_redirect_uri

Omdirigerings-URI samsvarer ikke. Må være nøyaktig samme URL.

state_mismatch

Statusparameteren stemmer ikke overens. Mulig CSRF-angrep eller tidsavbrudd i økten.

API-feil

401 Unauthorized

Tokenet er ugyldig eller utløpt. Be brukeren om å logge på igjen.

403 Forbidden

Tokenet har ikke de nødvendige rettighetene. Sjekk tilgangsnivået.

429 Too Many Requests

Takstgrensen er nådd. Vennligst vent til neste forespørsel.

500 Server Error

Intern feil. Vennligst prøv igjen senere eller kontakt kundestøtte.

Tips om feilsøking

Test med OAuth Test Client

Bruk testklienten vår for å bekrefte at OAuth-flyten fungerer som den skal.

Test OAuth Flow →

Loggfør alle parametere

Loggstatus, token og andre parametere for å feilsøke problemer.

Sikkerhet og beste praksis

Token-lagring

• Aldri lagre tokens i informasjonskapsler eller localStorage
• Bruk økter på serversiden eller kryptert database
• Krypter tokens før lagring
• Slett tokens når de ikke lenger er i bruk

CSRF-beskyttelse

• Bruk alltid tilstandsparameteren
• Generer unik tilstand for hver økt
• Bekreft tilstand i tilbakeringing
• Timeout-tilstand etter kort tid

HTTPS kreves

• Bruk kun HTTPS for redirect_uri
• Alle API-kall må gå via HTTPS
• Unntak: localhost for utvikling
• Sjekk gyldigheten til SSL-sertifikatet

Forklaring av tilgangsnivåer

Nivå	Beskrivelse	Tillatt	Ikke tillatt
read	Lesetilgang til alle data	GET-forespørsler til alle endepunkter	POST-, PUT- og DELETE-forespørsler
write	Lese og skrive data	Alle HTTP-metoder	Slett nettbutikk, endre eierskap
all	Full administratortilgang	Alt, inkludert farlige operasjoner	Ingenting - full kontroll

Anbefaling: Begynn med "lesetilgang" under utviklingen, og oppgrader til "skrivetilgang" eller "alle" bare når det er nødvendig for funksjonaliteten i applikasjonen.

Komplett API-dokumentasjon

Se alle tilgjengelige endepunkter, metoder og parametere i vår REST API-dokumentasjon

Se API-dokumentasjon

Opprett butikken din

Bestill en samtale

Takk for din henvendelse!

Nødsituasjon

OAuth Integration

Hva er OAuth?

Trygt og sikkert

Enkel integrering

Fleksibel

OAuth Flow - trinn for trinn

Send bruker til Shoporama

Bruker logger inn

Motta API-token

Bruk API-et

Er du klar til å komme i gang?

Komplette Implementeringseksempler

Vanilla PHP Implementation

Sådan bruger du det:

Laravel Implementation

Laravel Features:

Frontend JavaScript Implementation

Bemærk om CORS:

Node.js/Express Implementation

Installation:

Python/Flask Implementation

Installation:

Feilsøking og vanlige problemer

Vanlige OAuth-feil

access_denied

invalid_client

invalid_redirect_uri

state_mismatch

API-feil

401 Unauthorized

403 Forbidden

429 Too Many Requests

500 Server Error

Tips om feilsøking

Test med OAuth Test Client

Loggfør alle parametere

Sikkerhet og beste praksis

Token-lagring

CSRF-beskyttelse

HTTPS kreves

Forklaring av tilgangsnivåer

Komplett API-dokumentasjon