구글 로그인, 페이스북 로그인 왜 웹뷰에서는 안될까?
수많은 앱제작, 앱개발 로그인 기능 중 소셜 로그인을 추가하여 더욱 간편한 로그인을 제공하고 있어요.
이러한 소셜 로그인 중 가장 구글, 페이스북 로그인이 널리 사용되고 있습니다.
그러나 웹뷰(WebView)에서 이러한 로그인을 구현하려고 할 때 여러 가지 문제가 발생할 수 있습니다.
가장 흔한 문제 중 하나는 “user agent disallowed” 에러입니다.
✅user agent disallowed 에러란?
“User agent disallowed” 에러는 웹뷰에서 구글 또는 페이스북 로그인 페이지에 접근하려고 할 때 발생하는 오류입니다.
이 오류는 구글과 페이스북이 웹뷰에서의 로그인을 기본적으로 차단하기 때문에 발생합니다.
이는 보안상의 이유와 사용자 경험을 보호하기 위한 조치입니다.
Google Login 웹뷰에서 차단 예시
Facebook Login 웹뷰에서 차단 예시
해당 정책의 이유와 원인
구글과 페이스북은 웹뷰 환경이 일반 브라우저보다 보안에 취약하다고 판단하여, 웹뷰를 통한 로그인을 기본적으로 차단합니다.
웹뷰는 외부 코드 실행 및 콘텐츠 표시를 허용하기 때문에 악의적인 공격에 노출될 가능성이 높습니다.
따라서, 사용자 데이터를 보호하고 피싱 공격을 예방하기 위해 구글과 페이스북은 웹뷰에서의 로그인을 제한합니다.
어떻게 해결할 수 있나요?
웹뷰에서 소셜 로그인을 구현하는 방법에는 몇 가지 대안이 있습니다.
- 내장된 브라우저 실행하기
- User Agent 변경
1.내장된 브라우저 실행하기
웹뷰 대신 내장된 브라우저를 사용하여 로그인 페이지를 열면 보안 문제를 피할 수 있습니다.
내장된 브라우저는 사용자 경험을 향상시키고, 보안성을 높이기 위해 설계된 기능입니다.
이러한 내장 브라우저는 사용자가 로그인할 때 브라우저의 보안 메커니즘을 그대로 사용할 수 있게 해주며, 로그인 후 원활하게 앱으로 돌아올 수 있도록 도와줍니다.
2.내장 브라우저의 사용 효과
(1) 보안 강화: 내장된 브라우저는 웹뷰보다 보안이 강화된 환경을 제공합니다.
이를 통해 사용자의 로그인 정보가 안전하게 보호됩니다.
(2) 일관된 사용자 경험: 사용자는 내장된 브라우저를 통해 로그인할 때 브라우저의 모든 보안 및 UI 기능을 사용할 수 있습니다.
이는 사용자 경험을 일관되게 유지하는 데 도움이 됩니다.
(3) 간편한 구현: 개발자 입장에서 내장 브라우저를 사용하는 것은 매우 간단하며, 이를 통해 복잡한 보안 문제를 손쉽게 해결할 수 있습니다.
Android에서는 CustomTabsIntent를 사용하고, iOS에서는 SFSafariViewController를 사용합니다.
Android 예제 코드 (CustomTabsIntent 사용):
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.browser.customtabs.CustomTabsIntent;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.loginButton).setOnClickListener(view -> {
String url = "https://accounts.google.com/signin";
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(MainActivity.this, Uri.parse(url));
});
}
}
iOS 예제 코드 (SFSafariViewController 사용):
import UIKit
import SafariServices
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 50))
button.setTitle("Login with Google", for: .normal)
button.addTarget(self, action: #selector(openBrowser), for: .touchUpInside)
self.view.addSubview(button)
}
@objc func openBrowser() {
if let url = URL(string: "https://accounts.google.com/signin") {
let safariVC = SFSafariViewController(url: url)
present(safariVC, animated: true, completion: nil)
}
}
}User Agent 변경 (구글 로그인만 해결 가능)
구글 로그인을 사용할 경우, 웹뷰의 User Agent를 변경하여 문제를 해결할 수 있습니다.
그러나 이 방법은 페이스북 로그인에는 적용되지 않습니다.
Android 예제 코드:
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// User Agent 변경
webSettings.setUserAgentString("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36");
webView.loadUrl("https://accounts.google.com/signin");
}
}
iOS 예제 코드:
import UIKit
import WebKit
class ViewController: UIViewController {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
self.view = webView
// User Agent 변경
webView.customUserAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
if let url = URL(string: "https://accounts.google.com/signin") {
let request = URLRequest(url: url)
webView.load(request)
}
}
}
생각보다 복잡한 웹뷰앱 만들기, 스윙투앱에서는 간단히 해결 가능!
웹뷰를 이용한 소셜 로그인 구현은 여러 가지 제약 사항과 보안 문제를 동반할 수 있습니다.
하지만 스윙투앱을 사용하면 이러한 문제들을 쉽게 해결할 수 있습니다.
스윙투앱은 개발자들이 복잡한 네이티브 코드를 작성하지 않아도 손쉽게 웹앱을 만들 수 있도록 도와줍니다.
특히, 스윙투앱은 사용자들에게 직관적이고 쉬운 인터페이스를 제공하여 웹 개발자들이 간단하게 앱을 제작할 수 있도록 지원합니다.
스윙투앱에서는 네이티브 코드 구현없이 2가지 솔루션을 적용할 수 있습니다.
아래의 문서를 통해 적용 예시를 확인해보세요~!
